Bootstrap：如何在流体容器内正确居中 6 列 DIV

Question

我很想知道使用 Bootstrap 将 DIV（col-lg-6）居中在流体容器（12 列）内的正确方法是什么？

这是我的设计模型的屏幕截图，它解释了我想要实现的目标：http://d.pr/i/1iBrP。

到目前为止，我在 Bootstraps 网站上看到，这种事情可以通过添加偏移类来实现，例如：

<div class="container-fluid">
    <div class="row">
      <h1 class="col-xs-12 col-sm-10 col-md-6 col-sm-offset-1 col-md-offset-3">Auto cargo</h1>
    </div>
</div>

这是一种正确的方法，还是有更好（或更可取）的方法来完成这项任务？

另外，如果 DIV 的宽度为 7 列，这意味着 DIV 一侧的列数会有所不同，因为 12 - 7 = 5 列且 5 不是偶数？

非常感谢您。

Answer 1

1. 如果您有 7 列，则无法使用纯 Bootstrap 将其居中，您可以这样做：

.col-center {
  float: none;
  margin: 0 auto;
}

<div class="col-md-7 col-center">

1. 您的代码是正确的，但您不需要设置 col-xs-12 类（如果没有该类，它将自动在移动设备上设置 12 列 - div width = 100%。
2. 你将col-md-6和col-md-offset-3设置为中等屏幕尺寸，这意味着它在大屏幕（lg）上是一样的，如果你想在大屏幕上重置它你必须这样做（更改列大小并重置偏移量）：

<h1 class="col-sm-10 col-md-6 col-sm-offset-1 col-md-offset-3 col-lg-12 col-lg-offset-0">Auto cargo</h1>

4. 您不应该在 h1 元素上设置此类，这是更好的方法：

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-6 col-sm-offset-1 col-md-offset-3"> 
      <h1>Auto cargo</h1>
    </div>
  </div>
</div>

Answer 2

[编辑后的答案]

您可以在 div 中使用帮助程序类 center-block，它可以是 row。

这里是关于这个助手类的文档：Center content blocks

.container-fluid {
  border: 1px solid red;
}

.col-xs-7 {
  border: 1px solid blue;
}

.text-center > .single {
  display: inline-block;
  float: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container-fluid">
  
  <div class="row">
    <div class="col-xs-7 col-xs-offset-2">
      I'm not centered
    </div>
  </div>
  
  <div class="row">
    <div class="col-xs-7 col-xs-offset-3">
      I'm not centered
    </div>
  </div>
  
  <div class="row center-block">
    <div class="col-xs-7 col-xs-offset-3">
      I'm not really centered
    </div>
  </div>
  
  <div class="row text-center">
    <div class="col-xs-7 single">
      I'm really centered
    </div>
  </div>
  
</div>

编辑：

我更新了 sn-p，因为 center-block 在我给出的示例中不起作用。

因此您可以在row 上使用text-center，以及一个名为single 的自定义类，该类使用display: inline-block 和float: none。

Answer 3

你不需要做那些复杂的代码，只需使用下面的代码，这将适用于所有屏幕。

        <div class="container-fluid">
          <div class="col-sm-6 col-sm-offset-3 text-center">
            <h2>Lorem ipsum dolor sit amet</h2>
          </div>
        </div>