Question

我想连续获得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-4 col-md-4">
        <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-4 col-md-4">
        <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-4 col-md-4">
        <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-4 col-md-4">
        <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>

但我只得到3列，最后一张图片跳到下一行。有人能指出我正确的方向吗？谢谢

Answer 1

只需在列上应用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>

Answer 2

将col-sm-4和col-md-4替换为col-sm-3和col-md-3。 Twitter Bootstrap是一个12列网格系统，因此4 + 4 + 4 + 4 = 16将最后一列推到下一行。

<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>

Answer 3

试试这个

<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>

Answer 4

Bootstrap网格分为12列。将12除以您想要的列数，您将得到该类的数字。

例如，12除以4是3.所以你的类应该是col-sm-3和col-md-3。

https://getbootstrap.com/examples/grid/

使用Twitter Bootstrap连续4列

4 个答案: