Html 使用Twitter引导程序一行4列

我试图在一行中获得4列

代码：

但我只得到3列，最后一个图像跳转到下一行。谁能给我指出正确的方向吗？

---

谢谢

将

col-sm-4

和

col-md-4

替换为

col-sm-3

和

col-md-3

。Twitter引导是一个12列的网格系统，因此4+4+4+4=16将把最后一列推到下一行

只需在列上应用col-sm-3、col-md-3类，而不是col-sm-4、col-md-4类

<div class="banner-static" style="margin-top: 30px; margin-bottom: 15px;">
<div class="row">
<div class="home-banner">
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><a href="#"><img class="top" src="/img/cms/banner1_hover.jpg"    alt="" /> <img class="bottom" src="/img/cms/banner1.jpg" alt="" /></a></p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><a href="#"><img class="top" src="/img/cms/banner2_hover.jpg"  alt="" /> <img class="bottom" src="/img/cms/banner2.jpg" alt="" /></a></p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><a href="#"><img class="top" src="/img/cms/banner3_hover.jpg" alt="" /> <img class="bottom" src="/img/cms/banner3.jpg" alt="" /></a></p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><a href="#"><img class="top" src="/img/cms/banner3_hover.jpg" alt="" /> <img class="bottom" src="/img/cms/banner3.jpg" alt="" /></a></p>
</div>
</div>
</div>
</div>

试试这个

<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><a href="#"><img class="top" src="/img/cms/banner1_hover.jpg"    alt="" /> <img class="bottom" src="/img/cms/banner1.jpg" alt="" /></a></p>
</div>

引导网格被分成12列。将12除以所需的列数，即可得到该类的数字

例如，12除以4等于3。因此，您的类应该是col-sm-3和col-md-3

---

请添加您的CSS代码…尝试此col-xs-12 col-sm-4 col-md-3 col lg-3@Legionar这是自举，他不需要。是的，这就是为什么我为它添加标签…想解释一下你改变了什么吗？为什么这被否决了？它提供了比其他答案更多的信息。。我不明白，不知道为什么会被否决。但是，是的，又一次是巨魔。