Question

这是一个非常奇怪的事情，我确信有一个解释（但似乎我无法自己解决）

以下面的代码为例：

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6">
      <div class="inner" id="large">large</div>
    </div>
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-6">
          <div class="inner" id="small">small</div>
        </div>
      </div>
    </div>
  </div>
</div>

上面的代码将放置两个div（每个宽度为50％），第二个div再次分成两个div（同样都是50％宽度）

所以这将使第二个（较小的一个）1/2大的一个。但实际上并没有发生id="small"的div不是id="large"

的一半我为此做了一支笔：

http://codepen.io/anon/pen/zGMrMz

我想知道的是为什么会发生这样的行为，以及如何在没有黑客攻击的情况下解决问题。

Answer 1

Bootstrap将一些填充和边距应用于col-*和row

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

一切都如预期。

你的行960px宽，你有一个col-xs-6已应用的div，因此你有一个480px div左右15px padding所以你的内部div是480px-30px = 450px。

这确实不是你的第一个div的一半，而是更宽一点。

您可以覆盖这些值。为此，我建议你在一个单独的css文件中而不是直接在bootstrap css中进行，因此如果你升级你的bootstrap版本，你将不会破坏你的更改。

编辑：关于您的评论，您有两次col-xs-6已定义，因此填充应用了两次

    <div class="col-xs-6">       // 930px + 30px from padding -> 960px
      <div class="row">          // 930px + 30px from negative margins -> 960px
        <div class="col-xs-6">   // 960px / 2 -> 480px
          <div class="inner" id="small">small<p>width : 450px</p></div>  // 480px - 30px padding from parent -> 450px
        </div>
      </div>
    </div>

此致

Answer 2

您通常使用.row来包装每一列。 .row增加了填充和边距。

<div class="container-fluid">
<div class="row ">
   <div class="col-xs-6 nopadding ">
     <div class="inner" id="large">large</div>
   </div>
   <div class="col-xs-6">
     <div class="row ">
       <div class="col-xs-6 nopadding">
         <div class="inner" id="small">small</div>
       </div>
     </div>
   </div>
 </div>

如果您真的想要删除填充/边距，请添加一个类来过滤掉每个子列的边距/填充。

.nopadding {
  padding: 0 !important;
  margin: 0 !important;
}

http://codepen.io/anon/pen/waQGBB

引导程序宽度计算问题

2 个答案: