Question

我使用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;

}

Answer 1

您有浮动清算问题。在第6列div之后添加：

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

如果您在其他视口上遇到同样的问题，可以添加更多可见实例：

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

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

Answer 2

也许用＆＃34; row＆＃34;添加div类。

<div class="row">
  <div class="col-md-2 col-xs-12 col-sm-3 songblock" id="songblock">
  </div>
</div>

或者也可以尝试使用＆＃34; col-md - ＃＆＃34;类和让休息默认。

<div class="row">
  <div class="col-md-2 ongblock" id="songblock">
  </div>
</div>

Answer 3

查看相关代码，问题似乎是cols没有一致的高度。它在第5个元素的下方包裹在第5个元素的右边，比第6个元素高。如果将方块设置为特定高度，则它将作为正确的网格工作，并且仍然允许您使其响应，以便您的行可以具有不同宽度的不同分辨率。 如果您使用clearfixes，那么您的行总是必须以相同的数量结束。

似乎可能会对class =＆＃39; row＆＃39;的需要感到困惑。根据一些答案。在Bootstrap 2中，您需要为每行创建新行，因为：第一个孩子的边距与其余跨度不同。但是，Boostrap 3使用：

box-sizing:border-box

允许它为每个col- *设置相同的填充。因此，正如您从以下HTML中看到的那样，没有列包装问题：

<!doctype html>
<html>
    <head>
        <link rel='stylesheet' type='text/css' href='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css' />
    </head>
    <body>
        <div class='container'>
            <div class='row'>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
            </div>
        </div>
    </body>
</html>

所以，你不需要一行来包装每组6个col- *。如果你这样做，那么响应功能将无法运行。例如。你可以使用col-md-2 col-sm-3 col-xs-6，col-xs-6每2个条目后需要一个新行，每4个条目需要一个col-sm，每6个条目需要一个col-md。显然，我们无法改变屏幕尺寸的HTML ...因此，当您希望动态数据包装在网格中时，您不希望为每个分组使用一行。有意义吗？

但是，您需要一个具有负margin-left:-20px;和margin-right:-20px;的ROW来抵消容器的20px填充...否则您的col- *会出现包装问题宽度最终比金额大40px。

无论如何，只是想对那些碰巧在这个页面上结束的人进行澄清，并开始认为他们必须用像旧BS2这样的行来包装每个组。

引导网格无法按预期工作

3 个答案: