Question

在下面的代码中， span＃2出现在span＃1 下面，尽管列数与父span（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”类并排保留即使有额外的填充和边框添加到其父级。

Twitter Bootstrap：嵌套行 - border将span列向下推

1 个答案: