【发布时间】：2014-06-23 16:56:20
【问题描述】：
我使用 bootstrap 3 创建了一个网格设计，但 div 没有正确堆叠
这是我得到的
看第二行。第一个和第三个低点工作正常，但看起来第二行受第一行内容的影响。如何解决这个问题？
这是我的 html
<div class="col-md-2 col-xs-12 col-sm-3 songblock" id="songblock">
<div class="album-art" id="albumArt">
<img src="images/glass.jpg" alt="IMAGE" />
</div>
<div class="song-text">
<div class="song-box-title">Song title</div>
<div class="song-box-channel">Channel Name</div>
<div class="song-box-views">202,432,121</div>
</div>
</div>
</div>
<div class="col-md-2 col-xs-12 col-sm-3 songblock" id="songblock">
<div class="album-art" id="albumArt">
<img src="images/glass.jpg" alt="IMAGE" />
</div>
<div class="song-text">
<div class="song-box-title">Song title</div>
<div class="song-box-channel">Channel Name</div>
<div class="song-box-views">202,432,121</div>
</div>
</div>
</div>
在 css 中我被告知这样做-：
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
【问题讨论】：
-
网格的每一“行”都需要包裹在
<div class="row">中，否则浮动不会被清除（列是浮动的）。 -
我在截图中看到了13张图片，但只有
<img>标签。 -
使用 javascript 填充数据，这是 2 个 div 的示例。我只是使用javascript一个接一个地堆叠每个具有该示例数据的div。
-
仅供参考 - .span*:first-child 是引导程序 2 的包装问题，它不适用于引导程序 3，因为 BS3 使用不同的盒子模型。但是，由于 BS3 不再使用“span”，这应该不会对您的页面产生任何影响。
标签： html twitter-bootstrap twitter-bootstrap-3