html - 居中 Bootstrap 列

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 标签，它已被弃用，请改用 bootstrap 中的 .text-center

• .row 必须是 .container

  的子级

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

查看有关 bootstrap documentation 的更多信息

---

因为不清楚您要在此处的移动 View 中实现什么 2 个片段:

代码段 #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>