Question

我正在使用bootstrap 3并且知道负余量＆amp; padding使bootstrap3网格工作。

但是，我不确定.container中的.container-fluid > .row是否是使用网格的正确方法？这会引起反应性问题吗？

<div class="container-fluid">
  <div class="row"> 
    **<div class="container">**
        <div class="col-xs-6> First column</div>
        <div class="col-xs-6> Second column</div>
    </div>
  </div>    
</div>

我知道另一种方法是将.container放在col-xs-12这样的内容中：

<div class="container-fluid">
  <div class="row"> 
    **<div class="col-xs-12">
          <div class="container"> **
             <div class="col-xs-6> First column</div>
             <div class="col-xs-6> Second column</div>
          </div>
      </div>
  </div>    
</div>

感谢 DK

Answer 1

代码错误有几个原因。来自Bootstrap 3.3.x docs ...

＆＃34;请注意，由于填充等原因，两个容器都不可嵌套。＆＃34;

并且，列始终直接位于.row ...

内

＆＃34; ...只有列可能是行的直接子项。＆＃34;

因此，您不应该直接在容器中使用col。如果您想缩小container-fluid use nesting内的宽度，例如......

<div class="container-fluid">
  <div class="row"> 
    <div class="col-xs-12">
       <div class="row">
          <div class="col-xs-10 col-xs-offset-1">
             <div class="row">
                <div class="col-xs-6> First column</div>
                <div class="col-xs-6> Second column</div>
              </div>
          </div>
        </div>
     </div>
  </div>    
</div>

Bootstrap 3：我可以将一个容器放在容器内部的容器内吗？

1 个答案: