Bootstrap 3 - 2 列嵌套行答案

【问题标题】：Bootstrap 3 - 2 column nested rowsBootstrap 3 - 2 列嵌套行
【发布时间】：2013-10-11 13:54:50
【问题描述】：

我正在尝试使用尽可能少的自己的标记和 CSS 在 Bootstrap 3 中实现以下目标。理想情况下，我想使用纯 Bootstrap 标记来实现这一点，而无需求助于黑客。我查看了文档，但看不到标准化的方式....

正如您在下面看到的，我试图获得两行，中间有一个间隙。

我的标记如下

<section class="row">

   <article class="col-sm-12 col-md-6">
     <!--ROW LEFT-->
     <div class="row">
      <div class="col-sm-4">col</div>
      <div class="col-sm-4">col</div>
      <div class="col-sm-4">col</div>
     </div>
   </article>

   <article class="col-sm-12 col-md-6">
     <!--ROW RIGHT-->
     <div class="row">
      <div class="col-sm-4">col</div>
      <div class="col-sm-4">col</div>
      <div class="col-sm-4">col</div>
     </div>
   </article>
</section>

Bootstrap 在 Docs 中唯一类似的示例如下，但您没有在中心找到间隙。

引导标记

<div class="row">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-sm-6">
      content
      </div>
      <div class="col-sm-6">
      content
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： css twitter-bootstrap-3 multiple-columns

【解决方案1】：

要扩展 Skelly 的答案，您可以使用 Bootstrap 的列偏移类来创建列之间的间隙：

<div class="container"><section class="row">

   <article class="col-sm-12 col-md-5">
     <!--ROW LEFT-->
     <div class="row" style="background-color:blue;">
      <div class="col-sm-4" style="background-color:orange;">col</div>
      <div class="col-sm-4" style="background-color:silver;">col</div>
      <div class="col-sm-4" style="background-color:orange;">col</div>
     </div>
   </article>

   <article class="col-sm-12 col-md-5 col-md-offset-2">
     <!--ROW RIGHT-->
     <div class="row" style="background-color:blue;">
      <div class="col-sm-4" style="background-color:silver;">col</div>
      <div class="col-sm-4" style="background-color:orange;">col</div>
      <div class="col-sm-4" style="background-color:silver;">col</div>
     </div>
   </article>

</section></div>

http://bootply.com/103191

这样可以避免添加额外的样式，但确实会产生更大的间隙，因为您使用两个虚拟列来创建空间。

如果您不介意右边的多余空间，您可以将偏移量设为 1。

【讨论】：

【解决方案2】：

你想要多大的差距？

使用 BS cols 你可以做这样的事情..

<div class="row">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-sm-5">
      content
      </div>
      <div class="col-sm-1"></div> <div class="col-sm-1"></div>
      <div class="col-sm-5">
      content
      </div>
    </div>
  </div>
</div>

演示：http://bootply.com/87117

【讨论】：

【解决方案3】：

（或）尝试使用填充：

<section class="row" style="background-color:red;">

   <article class="col-sm-12 col-md-6" style="padding-right:30px;">
     <!--ROW LEFT-->
     <div class="row" style="background-color:blue;">
      <div class="col-sm-4" style="background-color:orange;">col</div>
      <div class="col-sm-4" style="background-color:silver;">col</div>
      <div class="col-sm-4" style="background-color:orange;">col</div>
     </div>
   </article>


   <article class="col-sm-12 col-md-6" style="padding-left:30px;">
     <!--ROW RIGHT-->
     <div class="row" style="background-color:blue;">
      <div class="col-sm-4" style="background-color:silver;">col</div>
      <div class="col-sm-4" style="background-color:orange;">col</div>
      <div class="col-sm-4" style="background-color:silver;">col</div>
     </div>
   </article>

</section>

您的空白处为红色，请参阅：http://bootply.com/87152

【讨论】：