Question

我在使用引导网格时遇到问题。我有6个项目要显示，当屏幕为MD时每行显示3个，然后当SM时显示2个，而当XS时显示为1个。我也需要在左右两侧留一个空间。我有它，它的工作距离下降到2，并且中间有一个空格？任何帮助表示赞赏。

代码是：

<div class="container-fluid col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1">
<div id="services" class="container-fluid text-center">
  <h2>Middle text here</h2>
  <br>
  <div class="row slideanim">
    <div class="col-sm-4">
      <img alt="" height="42" src="images/earth.png" width="42" />
      <h4>1</h4>
      <h2>description<</h2>
    </div>
    <div class="col-sm-4">
      <img alt="" height="42" src="images/plane.png" width="42" />
      <h4>2</h4>
      <h2>description<</h4>
    </div>
    <div class="col-sm-4">
      <img alt="" height="42" src="images/headset.png" width="42" />
      <h4>3</h4>
      <h2>description<</h2>
    </div>
  </div>

  <div class="row slideanim">
    <div class="col-sm-4">
      <img alt="" height="42" src="images/bus.png" width="42" />
      <h4>4</h4>
      <h2>description<</h2>
    </div>
    <div class="col-sm-4">
      <img alt="" height="42" src="images/24phone.png" width="42" />
      <h4>5</h4>
      <h2>description<</h2>
    </div>
    <div class="col-sm-4">
      <img alt="" height="42" src="images/clock.png" width="42" />
      <h4>">5</h4>
      <h2>description</h2>
    </div>
  </div>
</div>
</div>

Answer 1

不需要嵌套多个容器。
记住引导程序使用12列布局。因此，如果您要连续2个项目，请使用类.col-{}-6。如果您要连续3个项目，请使用类.col-{}-4组成总共12列。
偏移类已更改。请参阅文档。

小提琴： https://jsfiddle.net/aq9Laaew/91245/

几个Bootstrap布局问题

1 个答案: