Question

我有以下结构：

 <div class="col-md-8">
  <div class="col-md-12">
    <div class="col-md-6">Content</div>
    <div class="col-md-6">Content</div>
  </div>
 </div>

我想要一个作为容器的列，并在每一侧留下2个单位，因此col-md-8 div。我希望中心，我希望所有其他列元素也集中，但我不知道如何做到这一点。由于某种原因，添加边距并不能正常工作。添加＆＃34;对齐：中心＆＃34;将文本集中在列中，我不希望这样。有人可以帮忙吗？

Answer 1

您必须使用col-<size>-offset-<number>标记将元素移动相应的数量：

<div class="col-md-8 col-md-offset-1">
 <div class="col-md-12">
  <div class="col-md-6 col-md-offset-3">Content</div>
  <div class="col-md-6 col-md-offset-3">Content</div>
 </div>
</div>

查看CSS样式的Bootstrap页面，他们有一些示例可以帮助您了解偏移和嵌套div的工作原理：Bootstrap CSS

Here is a Plunkr demonstrating some ways to use nesting and offsets

Answer 2

将.center-container css用于每个元素以使div元素居中。

    .center-container{
        display: table;
        margin: 0 auto;
        float: none;
    }
        <div class="col-md-8 center-container">
          <div class="col-md-12 center-container">
            <div class="col-md-6">Content</div>
            <div class="col-md-6">Content</div>
          </div>
        </div>

如何垂直居中引导列元素

2 个答案: