中心引导列

Question

我已使用此代码在 Bootstrap

中创建了 4 列

<div id="col" class="container-fluid row">
  <div class="col-md-3">
    <center>
      <h4>Our Story</h4><img src="box.png" />
    </center>
  </div>
  <div class="col-md-3">
    <h4>Our Story</h4><img src="box.png" />
  </div>
  <div class="col-md-3">
    <h4>Our Story</h4><img src="box.png" />
  </div>
  <div class="col-md-3">
    <h4>Our Story</h4><img src="box.png" />
  </div>
</div>

现在这些列在桌面屏幕上水平对齐，但是当我在移动设备中打开时，所有列都在左侧垂直对齐，所以我想让它们居中对齐，我该如何实现？

Answer 1

这在很多方面都是错误的：

• 不要使用center标签，它已被弃用，而是使用引导程序中的.text-center

• .row 必须是 .container 的子级

• 如果您需要为移动设备设置样式，则必须使用 xs 类

查看更多关于bootstrap documentation的信息

---

因为在此处 2 sn-ps 中不清楚您要在移动视图中实现什么：

片段 #1 - 所有设备水平 4 列

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="col" class="container-fluid">
  <div class="row text-center">
    <div class="col-xs-3">
        <h4>Our Story</h4>
        <img src="//placehold.it/100x100" />
    </div>
    <div class="col-xs-3">
      <h4>Our Story</h4>
      <img src="//placehold.it/100x100" />
    </div>
    <div class="col-xs-3">
      <h4>Our Story</h4>
      <img src="//placehold.it/100x100" />
    </div>
    <div class="col-xs-3">
      <h4>Our Story</h4>
      <img src="//placehold.it/100x100" />
    </div>
  </div>
</div>

片段 #2 - 4 列垂直移动/4 列水平小型设备及以上

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="col" class="container-fluid">
  <div class="row text-center">
    <div class="col-xs-12 col-sm-3">
        <h4>Our Story</h4>
        <img src="//placehold.it/100x100" />
    </div>
    <div class="col-xs-12 col-sm-3">
      <h4>Our Story</h4>
      <img src="//placehold.it/100x100" />
    </div>
    <div class="col-xs-12 col-sm-3">
      <h4>Our Story</h4>
      <img src="//placehold.it/100x100" />
    </div>
    <div class="col-xs-12 col-sm-3">
      <h4>Our Story</h4>
      <img src="//placehold.it/100x100" />
    </div>
  </div>
</div>