引导:如何正确地将6列DIV放在流体容器内的中间

Question

我很想知道在流体容器(12列)内部用引导带将DIV (Col 6)对中的正确方法是什么？

下面是我的设计模型的截图，它解释了我想要实现的目标：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

编辑的答案

您可以在一个可以是center-block的div中使用助手类row。

下面是关于这个助手类的文档：中心内容块

​

.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>

​

编辑：

我更新了代码片段，因为center-block在我给出的示例中不起作用。

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

Answer 2

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

​

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

​