Question

这里是新学员。我在我的.col-md-10 div中嵌套了我的2行之间缺少间距的问题。现在我的代码看起来像这样：

  <div class="col-md-10 col-md-offset-1">
    <div class="panel panel-default">
      <div class="panel-body">
        <div class="page-header">
          <h3>Portfolio</h3>
        </div> <!--.page-header-->

        <div class="row center-block">
          <div class="col-md-4">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
          <div class="col-md-4">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
          <div class="col-md-4">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
        </div> <!--.row-->

        <div class="row center-block">
          <div class="col-md-4">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
          <div class="col-md-4">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
          <div class="col-md-4">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
        </div> <!--.row-->

      </div> <!--.panel-body-->
    </div><!--.panel panel-default-->
  </div><!--.col-md-10-->

</row><!--.row-->

Here就是它在屏幕上的样子。

我最初根据＆＃34;偏移列＆＃34;将图像分成两个.row中心块div（而不是所有.col-md-4 div在一个.row div中）。 Bootstrap网站上的示例，但它没有更改屏幕上呈现的内容。

如果这有用，here是我项目的所有代码。提前谢谢！

Answer 1

在Twitter Bootstrap中，行之间通常没有空格。因此，您需要自己添加margin。您可以创建一个类并将其添加到第二行。例如：

.row-space{ 
    margin-top:10px; 
}

然后，

<div class="row center-block row-space">
    //The content goes here
</div>

Answer 2

基于LVarayut的回答，我最终向所有margin-top div添加.col-md-4以调整行之间的间距。此外，我将两个.row center-block div合并为一个div并添加了一个.col-xs-6类，现在可以在移动设备和平板电脑尺寸上每行渲染2个图像。这是我的新代码：

  <div class="col-md-10 col-md-offset-1">
    <div class="panel panel-default">
      <div class="panel-body">
        <div class="page-header">
          <h3>Portfolio</h3>
        </div> <!--.page-header-->

        <div class="row center-block">
          <div class="col-md-4 col-xs-6">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
          <div class="col-md-4 col-xs-6">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
          <div class="col-md-4 col-xs-6">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
          <div class="col-md-4 col-xs-6">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
          <div class="col-md-4 col-xs-6">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
          <div class="col-md-4 col-xs-6">
            <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
          </div><!--.col-md-4-->
        </div> <!--.row-->

      </div> <!--.panel-body-->
    </div><!--.panel panel-default-->
  </div><!--.col-md-10-->

这是我添加margin-top以实现间距的地方：

 .col-md-4, .col-xs-6 {
   margin-top: 20px;
 }

Bootstrap3中嵌套行之间缺少间距的问题

2 个答案: