Question

我有以下内容：

＆＃34;

    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <h3><span class="label label-default">Current Job</span></h3>
            </div>
            <div class="col-md-offset-10">
              <h6 id="dateTime">23/07/2015 12.00</h6>
            </div>
       </div>
     </div>
</div>
<div class="panel-body">

</div>
<div class="panel-footer"></div>

＆＃34;

仅使用bootstrap，是否可以将Header面板（包含网格）中包含的不同尺寸的两个垂直标签（当前作业和日期）居中，以及如何操作？

Answer 1

您需要更改以下容器的CSS：

<div class="col-md-3">和<div class="col-md-offset-10">

给予容器float: none;和margin: 0 auto绝对是两者的中心。如果您希望文本也居中，请添加一些text-align: center

那应该包括你。

抱歉，忘记提及容器<div class="col-md-offset-10">需要与其他容器的宽度匹配（25％）。

Answer 2

您可以通过从div标签中删除标签中的类并将text-center类提供给带有类行的div来实现此目的。这将使两个标签显示在页面的中间并且一个接一个地垂直显示。这就是你的代码容器的样子：

<div class="container">
  <div class="row text-center">
    <div>
      <h3><span class="label label-default">Current Job</span></h3>
    </div>
    <div>
      <h6 id="dateTime">22/07/2015 12:00:00</h6>
    </div>
  </div>
</div>

网格行中的中心元素

2 个答案: