我在使用 Bootstrap 进行行列对齐时遇到了一些问题。
<div class="container">
<div class="col-md-3">
<img src="/assets/images/home/youth.jpg">" alt="...." class="img-responsive"></img>
</div>
<div class="row">
<div class="col-md-2 col-sm-2 front-col">
col-md-2
</div>
<div class="col-md-2 col-sm-2 front-col">
col-md-2
</div>
<div class="col-md-2 col-sm-2 front-col">
col-md-2
</div>
</div> <!-- ./row -->
<div class="row"><!-- Row 2 -->
<div class="col-md-2 col-sm-2 front-col">
col-md-2
</div>
</div>
我的问题是第二行中的列(靠近代码底部)没有出现在我的第一行下方,而是出现在图像下方。 IE。我在左侧的一列中有一个图像,在它的右侧我有一个包含 3 行列的行。关闭此行后,我想在其正下方再添加一行,但是,该行显示在图像下方。
(“front-col”选择器不相关 [我相信]——它将 3 列的 padding-left 设置为 5px)
在此先感谢您的帮助。
史密斯
最佳答案
你还没有包装第一个 .col-md-3
在 .row
里面.如果你这样做,你的第二行将出现在它的下方而不是旁边。
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/100x100" alt="...." class="img-responsive">
</div>
</div>
作为旁注:
- 图像标签没有结束标签,例如
</img>
.请参阅上面我的更正。 - 您错过了结束容器 div 标记
</div>
. - 如果您使用
class="col-sm-2
你不需要也有col-md-2
.仅在大屏幕的列数不同时才添加。 - 您不应该乱用网格结构 div 的内边距或边距。你提到你的
.front-col
更改填充,但这可能会破坏网格。
关于css - Bootstrap 容器/列/行错位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21149259/