使用 col-lg-8 引导程序时，边距自动不起作用答案

【问题标题】：margin auto not working when using col-lg-8 bootstrap使用 col-lg-8 引导程序时，边距自动不起作用
【发布时间】：2018-02-26 19:42:35
【问题描述】：

我需要建立一个网上商店。

现在我试图在主容器中放置一个额外的div。为了居中，我为自动保证金做了一个课程。问题是它不适用于 Bootstrap 的col-lg-8。我将背景涂成黑色，看看会发生什么。它左对齐。如果我给div 一个固定宽度，它将在中心对齐，但background-color 没有显示，因为div 的高度变成了0px。

为什么当我使用 Bootstrap col-lg-8 时，margin auto 不起作用？当我给它一个固定的宽度时，为什么我的div 的高度消失了。之前我遇到过这个问题，当我使用自动高度时，div 的高度即使有一个带有输入的表单，它的值也会为 0。我希望它可以根据内容进行缩放。

<body>
    <div id="container" class="container col-lg-12">
        <div class="col-lg-8 margin-auto" style="background-color: #000;">
            <form class="col-lg-12">
                <input type="submit" value="Bestellen" />
            </form>
        </div>
    </div>
</body>

【问题讨论】：

row 在哪里？
为什么container col-lg-12 for同一个div？
<div class="col-lg-8 col-lg-offset-2" margin auto 不起作用，因为 Bootstrap 3 中的 cols 向左浮动。
正在使用什么引导版本？ V3 或 V4

标签： html css twitter-bootstrap

【解决方案1】：

您需要添加 a) a) row 和 b) 将 col-lg-8 的偏移量设为 2。margin-auto 不适用于浮动元素（这就是 Bootstrap 3 对 col 元素的作用）。

<div id="container" class="container">
  <div class="row">
    <div class="col-lg-8 col-lg-offset-2" style="background-color: #000;">
      <form class="col-lg-12">
        <input type="submit" value="Bestellen" />
      </form>
    </div>
  </div>
</div>

仅包含浮动元素的元素默认具有height: 0;。为确保容器元素在视觉上包含其子元素，您需要将 clearfix 类添加到容器中。

【讨论】：

有人编辑了问题以包含引导程序 V3 ...但 OP 从未指定哪个版本，所以我们需要验证这一点，因为我很确定他正在使用 V4
col 类在 V4 中以不同的方式命名。它必须是 3。
不一样，他使用的类在V4中也有提供getbootstrap.com/docs/4.0/layout/grid/#grid-options
V4 使用 mx-auto 而 V3 使用 margin-auto。
如何让第二个 div 居中，并且在不对宽度进行硬编码的情况下获取完整的宽度？