twitter-bootstrap - 在 bootstrap 中居中列

Question

我在这样的 Bootstrap 页面中有 2 列:

<div class="col-xs-12 col-sm-6 col-md-8">
</div>
<div class="col-xs-6 col-md-4">
   <div class="container-fluid">
      <div class="row">
      </div>
   <div>
</div>

我想要居中的是右栏(第二栏)。当我缩小屏幕尺寸以模拟智能手机设备时，我看到该列与左侧对齐。我想要的是在小型设备或大型设备中将该列中的所有内容居中。

Answer 1

使用offset Bootstrap 提供的类:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-8 col-md-offset-0">
      <div class="wrapper">
        <h2>Left column</h2>
      </div>
    </div>
    <div class="col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-0">
      <div class="wrapper">
        <h2>Right column</h2>
      </div>
    </div>
  </div>
</div>

解释:

首先，当您使用 col-xs-6 且未指定 col-sm-* 时，在您的第二列中，这意味着这也是 col-sm-6:

<div class="col-xs-6"></div>
<div class="col-xs-6 col-sm-6"></div>

这两行代码是一样的(最好用第一行)。偏移类也是如此(如果你指定了 col-xs-offset-3 而没有指定 col-sm-offset-* 这意味着这也是 col-sm-offset- 3).

在 bootstrap 中你有 12 列。如果您想将 col-sm-6 居中，则必须将其偏移 3 列 (col-sm-offset-3 3+6 +3).

我必须在 md 列中指定偏移量为 0，因为我必须覆盖 col-sm-offset-3。如果我不那样做，它就会是 col-md-offset-3。

CODEPEN EXAMPLE