这里是新学员。我在我的.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是我项目的所有代码。提前谢谢!
答案 0 :(得分:1)
在Twitter Bootstrap
中,行之间通常没有空格。因此,您需要自己添加margin
。您可以创建一个类并将其添加到第二行。例如:
.row-space{
margin-top:10px;
}
然后,
<div class="row center-block row-space">
//The content goes here
</div>
答案 1 :(得分:0)
基于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;
}