中心引导列

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个片段：

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

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