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" 替换为 class="row-fluid" 因为“row”类使用严格的宽度，而“row-fluid”类使用百分比并且将“span6”类并排放置即使为其父级添加了额外的填充和边框。