Question

我需要在Bootstrap3中居中对齐每个div。使其成为会计报告。那里有3级div - 标题，副标题和详细列表。每个级别我使用col-md-*来限制宽度。我试过text-align，但没有帮助。

以下是代码：

<div class="container">
<div class="header text-info">
        <h1>Heading</h1><br />
        <h2>Acc. Type</h2><br />
        <h3>Month</h3>
    </div>
<legend>Income</legend>
    <div class="acc-content row">
        <div class="col-md-12">
            <b>col-md-12</b>
            <span class="pull-right">#@#</span>
        </div>
    </div>
<legend>Expense</legend>
    <div class="acc-content row">
        <div class="col-md-12">
            <b>col-md-12</b>
            <span class="pull-right">#@#</span>
        </div><!-- /col-md-12 -->
        <div class="col-md-10">
            <b>col-md-10</b>
            <span class="pull-right">#@#</span>
        </div><!-- /col-md-10 -->
        <div class="col-md-8">
            <b>col-md-8</b>
            <span class="pull-right">#@#</span>
        </div><!-- /col-md-8 -->
    </div><!-- /acc-content -->
</div>

DEMO：http://fiddle.jshell.net/nobuts/mshwa1yt/1/show/（请在桌面版中查看）。

我希望所有的div都像这样对齐:(红色边框只是一个测试）

请提出建议。

enter image description here

Answer 1

添加col-md-offset-*。例如：

<div class="col-md-10 col-md-offset-1">

和

<div class="col-md-8 col-md-offset-2">

您还必须将margin: 5px上的.acc-content div[class*='col-md-']更改为margin-top: 5px; margin-bottom: 5px，因为它会覆盖margin-left的Bootstrap col-md-offset-*。

Answer 2

使用行

使用块中心类包装

Answer 3

bootstrap中的所有col类都有float left属性。要么删除它们（不是adivsed）并将margin:auto添加到div ...或添加更多div：

如果你有一个col-8 add col-2 left和col-2 right（offsets）...所以你保持网格系统到位

Answer 4

您需要将其添加到div s：

.acc-content div[class*='col-md-'] {
    float: none;
    margin: 5px auto;
}

第一个覆盖float: left规则，它几乎与中心对齐它相反，第二个实际上将它与中心对齐。

Answer 5

Bootstrap 3有一个名为center-block的mixin，在utilities.less中找到。

首先，将类 center-block 添加到应居中的元素。

然后，如果使用Less，请添加到CSS：

.center-block {
.center-block();
}

如果使用普通CSS，请添加：

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Answer 6

在此示例中

替换此

     <div class="col-md-10">
        <b>col-md-10</b>
        <span class="pull-right">#@#</span>
    </div><!-- /col-md-10 -->
    <div class="col-md-8">
        <b>col-md-8</b>
        <span class="pull-right">#@#</span>
    </div><!-- /col-md-8 -->

用这个

<div class="col-md-10 col-md-offset-1">
        <b>col-md-10</b>
        <span class="pull-right">#@#</span>
    </div><!-- /col-md-10 -->
    <div class="col-md-8 col-md-offset-2">
        <b>col-md-8</b>
        <span class="pull-right">#@#</span>
    </div><!-- /col-md-8 -->

将col-md-offset-“cols of number”添加到col-divs

如何在bootstrap中居所有div 3

6 个答案: