javascript - 如何在 bootstrap 3 中将所有 div 居中

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>    

演示:http://fiddle.jshell.net/nobuts/mshwa1yt/1/show/ (请在桌面查看)。

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

请多多指教。

Answer 1

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

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

和

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

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

• 演示:http://jsfiddle.net/mshwa1yt/5/embedded/result/
• 文档:http://getbootstrap.com/css/#grid-offsetting