css - Twitter bootstrap 水平居中对齐容器

Question

我在居中我的容器时遇到问题。

<div class="row centered-form center-block">
    <div class="container col-md-10">
        <ul class="nav nav-tabs" id="projectTabs">
            <li role="presentation" class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
            <li role="presentation"><a href="#Tab2" data-toggle="tab">Tab2</a></li>
        </ul>
    </div>
</div>

主行以大约 65% 的宽度居中，但包含导航选项卡的容器位于该主行的左侧。

提前谢谢你。

Answer 1

使用 col-md-offset-1 类将容器移向中心。 Bootstrap 使用 12 列布局系统，因此 col-md-10 使您的 container 宽度为 10 列，但它从左侧开始。使用 offset 将元素向右推指定的量，因此 col-md-offset-1 将其向右移动 1 列。

<div class="row centered-form center-block">
    <div class="container col-md-10 col-md-offset-1">
        ...
    </div>
</div>