Question

我正在尝试使用尽可能少的自己的标记和CSS在Bootstrap 3中实现以下功能。理想情况下，我希望使用纯Bootstrap Markup来实现这一点，而不是诉诸黑客。我查看了文档但看不到标准化的方法......

正如你在下面看到的那样，我试图让两排中间有一个间隙。 bs row

我的标记如下

<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>

下面是Docs中唯一类似的Bootstrap示例，但是你没有在中心找到差距。

bootstrap

BOOTSTRAPS MARKUP

<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>

Answer 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。

Answer 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

Answer 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

Bootstrap 3 - 2列嵌套行

3 个答案: