html - Twitter Bootstrap：嵌套行 - 边框向下推动跨列

Question

在下面的代码中，跨度 #2 出现在跨度 #1 下方，尽管列数与父跨度 (10) 中的相同。这是因为嵌套行 ( class="row well")上的边框。

有没有一种优雅的方法可以在不向下推内容的情况下将边框应用于嵌套行。

我想根据嵌套跨度的位置和应用在嵌套跨度上应用上/左/下/右边框box-sizing: border-box会有所帮助，但是在减小浏览器的宽度时会出现问题，这也是一个丑陋的解决方案。

<div class="row">
  <div class="span2"> left menu </div>
  <div class="span10">
    <div class="row well">
      <div class="span5" style="background-color: #aca">
        #1
      </div>
      <div class="span5" style="background-color: #aac">
        #2
      </div>
    </div>
  </div>
</div>

Answer 1

不要把井放在行上，让它自己的容器..

<div class="row">
  <div class="span2"> left menu </div>
  <div class="span10">     
    <div class="well">
      <div class="row-fluid">
        <div class="span6" style="background-color: #aca">
          #1
        </div>
        <div class="span6" style="background-color: #aac">
          #2
        </div>
      </div>
    </div>
  </div>
</div>

我用 class="row-fluid" 替换了 class="row" 因为 "row" 类使用严格的宽度，而 "row-fluid" 类使用百分比并且将保持 "span6" 类并排，即使有添加到其父级的额外填充和边框。