html - Bootstrap : How to correctly centre a 6 column DIV inside of a fluid container

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

您的代码是正确的，但您不需要设置 col-xs-12 类(如果没有该类，它会在移动设备上自动设置 12 列 - div width = 100% 。

您为中等屏幕尺寸设置了 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>

您不应该在 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>