Bootstrap 4 CSS 覆盖不起作用，除非放置在
[英]Bootstrap 4 CSS Override Not Working Unless Placed in <HEAD>
问题描述
Following the solution from this SO Question , I put this in my own CSS:
按照这个 SO Question的解决方案，我把它放在我自己的 CSS 中：
#bootstrap-override .carousel.slide {
max-width: 1920px;
min-width: 900px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
#bootstrap-override .carousel-inner {
width: 1920px;
left: 50%;
margin-left: -960px;
}
But... it doesn't work.但是……这行不通。 Bootstrap 4's own CSS wins for some reason. Bootstrap 4 自己的 CSS 出于某种原因获胜。 Here's Bootstrap's CSS:这是 Bootstrap 的 CSS：
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-inner::after {
display: block;
clear: both;
content: "";
}
// the .slide class doesn't appear anywhere (I'm guessing it's just used by the JS, but I don't know that).
My CSS is defined after Bootstrap's, as well:我的 CSS 也是在 Bootstrap 之后定义的：
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Condensed&display=swap">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./css/index.css">
<title>...</title>
</head>
If I place my overriding CSS in the <head> it works correctly (and I get why) but I don't understand why it isn't working when I specify an id+class in my own CSS.如果我将覆盖的 CSS 放在<head>中，它可以正常工作（我明白为什么），但我不明白为什么当我在自己的 CSS 中指定 id+class 时它不工作。 As I understand it (which, at this point, must be very wrong) my CSS should have won out over Bootstrap's CSS even without specifying the id.据我了解（在这一点上，这肯定是非常错误的）我的 CSS 应该胜过 Bootstrap 的 CSS，即使没有指定 ID。 Anybody know what kind of Cascading-Style-Steroids Bootstrap is juicing with?有人知道用哪种 Cascading-Style-Steroids Bootstrap 榨汁吗？
Edit: Adding in the relevant HTML, as requested.编辑：根据要求添加相关的 HTML。
<body id="bootstrap-override">
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<div class="carousel-inner" style="height: 100%;"">
<div class=" carousel-item active">
<img class="d-block" src="./res/image.png" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<table style="margin-left:auto; margin-right:auto;">
<tr>
<td class="align-middle">
<img src="./res/logo.png" alt="...">
</td>
<td class="align-middle">
<h3>...</h3>
</td>
</tr>
</table>
</div>
</div>
<div class="carousel-item">Slide #2...</div>
<div class="carousel-item">Slide #3...</div>
</div>
</div>
</body>
1 个解决方案
解决方案1
0 2020-07-16 20:13:57
Can you check out the following possibilities -:你能检查出以下可能性吗？
- Is the following css file linked actually working?, just try to give body a background color.下面链接的 css 文件是否真的有效？，只需尝试给 body 一个背景颜色。
- If the css class is linked properly then is naming of the classes + id proper?如果 css class 链接正确，那么类 + id 的命名是否正确？
- If proper then sharing a carousal example where I overide Bootstraps carousal css.如果合适，那么分享一个轮播示例，其中我覆盖 Bootstraps 轮播 css。 Hope it is helpful.希望它是有帮助的。 If this is not helpful please can you help with, little more details like sample html tags of your carousal.如果这没有帮助，请您提供更多详细信息，例如您的 carousal 的示例 html 标签。
thank you.谢谢你。
JS-fiddle link for reference JS-fiddle 链接供参考
Custome CSS客户定制 CSS
#carouselExampleControls {
height: 100px;
text-align: right;
background: gray;
}
.img-fluid {
max-height: 100px;
}
Html Html
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect fill="#777"></rect><text x="50%" y="35%" fill="#555" dy=".3em">First slide</text></svg>
</div>
<div class="carousel-item">
<img class="img-fluid" src="https://thumbs.dreamstime.com/b/dead-tree-tall-portrait-view-blue-sky-background-57002950.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="img-fluid" src="https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
https://jsfiddle.net/chris495b/e0jzumnc/3/ https://jsfiddle.net/chris495b/e0jzumnc/3/
Hey if you have properly linked your files it should show in the devtools like the screen shot below.can you please share that as well.It would be really helpful in debugging the issue!!嘿，如果您已正确链接您的文件，它应该显示在 devtools 中，如下面的屏幕截图。您能否也分享一下。这对调试问题非常有帮助！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.