Question

如果我把mainCont作为一个类，所以看起来像这样的容器容器 - 流体mainCont＆＃39; div占用的宽度大于mainCont设置为ID时的宽度，如下面的代码所示。为什么是这样？我的猜测与某些引导样式仍然优先有关？

＆＃13;

body {
  width: 100%;
  font-size: 16px;
  /*or 1 em*/
}

#mainCont {
  width: 50%;
  margin: 0 auto;
  background-color: rgb(177, 175, 175);
}

＆＃13;

<div class='container container-fluid' id='mainCont'>
  <div class="row">
    <h1 id="twitchHead">TWITCH STREAMERS</h2>
  </div>
</div>

＆＃13;

Answer 1

它的特殊性 - 一个Id具有比一个类更大的特异性 - 所以当你将id应用于元素时 - 该id的样式规则胜过基于类的样式规则。

您应首先加载引导样式表，然后只需在其后面编写样式表 - 包含或不包含id。请注意，在Bootstrap CSS中使用！important是合理的，因此最好使用id来获得更大的特性。

顺便说一句 - 在Bootstrap世界中，.container将div限制为1200像素并将其居中（使用margin：0 auto），而.container fluid允许div占用浏览器的整个宽度 - 你应该使用其中一个而不是两者。

有趣的阅读特异性及其计算方法 https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 2

Bootstrap container类具有固定宽度，container-fluid类具有100％宽度，包裹整个设备宽度。所以在同一个div中使用它们并不是一个好主意！

例如

 <div class="container">
    <div class="row">
       <div class="col-sm-* ">

   </div> 
 </div> 
</div>

或

 <div class="container-fluid">
    <div class="row">
       <div class="col-sm-*">

   </div> 
 </div> 
</div>

为什么当我在容器容器流体＆＃39;旁边添加我自己的类时，我的宽度比我在DIV上使用ID时的宽度大？

2 个答案:

或