引导网格不按预期工作 [英] bootstrap grid not working as expected

问题描述

我使用bootstrap 3创建了一个网格设计，但divs没有正确堆叠

这是我得到的结果

看在第二排。第一个和第三个低位正常工作，但看起来像第二行受第一行内容的影响。如何解决这个问题？

这是我的html

 < div class =col-md-2 col-xs-12 col-sm-3 songblockid =songblock> 
< div class =album-artid =albumArt> 
< img src =images / glass.jpgalt =IMAGE/> 
< / div> 
< div class =song-text> 
< div class =song-box-title>歌曲标题< / div> 
< div class =song-box-channel>频道名称< / div> 
< div class =song-box-views> 202,432,121< / div> 
< / div> 
< / div> 
< / div> 
 
< div class =col-md-2 col-xs-12 col-sm-3 songblockid =songblock> 
< div class =album-artid =albumArt> 
< img src =images / glass.jpgalt =IMAGE/> 
< / div> 
< div class =song-text> 
< div class =song-box-title>歌曲标题< / div> 
< div class =song-box-channel>频道名称< / div> 
< div class =song-box-views> 202,432,121< / div> 
< / div> 
< / div> 
< / div> 
  

在css中，我被告知需要这样做：

  .row-fluid [class * =span]：first-child {
 margin-left：0; 
  

}

解决方案 div>

你有浮动清除问题。在第6列div后​​添加：

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

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

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

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

I have created a grid design using bootstrap 3 but divs are not stacking properly

Here is what i am getting

Look at the second row. First and third low are working properly but looks like second row is affected by the content of first row. How to fix this?

Here is my 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>

In css i was told to do this-:

.row-fluid [class*="span"]:first-child {
margin-left: 0;

}

解决方案

You are having float clearing issues. Add this after the 6th column div:

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

You can add more visible instance if you are having the same problem on other viewports:

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

More info: Responsive column resets: http://getbootstrap.com/css/#grid

这篇关于引导网格不按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！