html - Bootstrap 网格未按预期工作

标签 html twitter-bootstrap twitter-bootstrap-3

<分区>

我已经使用 bootstrap 3 创建了一个网格设计,但是 div 没有正确堆叠

这是我得到的

enter image description here

看第二行。第一和第三低工作正常,但看起来第二行受到第一行内容的影响。如何解决这个问题?

这是我的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;

最佳答案

您遇到 float 结算问题。在第 6 列 div 之后添加:

   <div class="clearfix visible-md"></div>

如果您在其他视口(viewport)上遇到同样的问题,您可以添加更多可见实例:

   <div class="clearfix visible-sm visible-md"></div>

更多信息:响应列重置:http://getbootstrap.com/css/#grid

关于html - Bootstrap 网格未按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23505524/

相关文章:

javascript - 淡入 JavaScript innerHTML

html - Bootstrap 4 页脚到底部高度

html - Bootstrap 3 排除 screen-lg

jquery - Bootstrap 3 事件状态导致导航栏上的错误

css - Bootstrap 响应式导航栏在浏览器中缩放时有效,但在我的手机上无效

jquery - 如何通过 ID 仅在一个 div 中删除 Bootstrap 3 的响应能力

html - 如何自动删除空白区域?

java.lang.ClassNotFoundException : Applet using external jar

javascript - jQuery : Find text after a string of specific tags and remove img tags if no images

twitter-bootstrap - Bootstrap 链接到部分 - 标题被导航栏固定顶部隐藏