我想用一个非常基本的例子。使用入门页面和网格系统,我希望如下:

< div class = "行" > < div class = " span12”> <h1>引导启动器模板</h1> < / p > < p >示例文本。 < / div > < / div >

...会产生居中的文本。

然而,它仍然出现在最左边。我做错了什么?


当前回答

<div class="container">
  <div class="col-md-12 centered">
    <div class="row">
      <div class="col-md-1"></div>
       <div class="col-md-10">
           label
       </div>
      <div class="col-md-1"></div>
    </div>
  </div>
</div>

不要主要使用容器流体。

其他回答

对于Bootstrap 3.1.1及以上版本,用于使内容居中的最佳类是.center-block helper类。

我创建了这个类来保持居中,无论屏幕大小,同时保持响应功能:

.container {
    alignment-adjust: central;
}

您可以使用以下类型中的任何一种

使用Bootstrap现有的类文本中心。 添加自定义样式,style = "text-align:center"。 使用列偏移量: 例如:<div class="col-md-offset-6 col-md-12"></div>

2018年更新:

在Bootstrap 4.1.3中,内容可以使用mx-auto类居中。

<div class="mx-auto">
  Centered element
</div>

参考:https://getbootstrap.com/docs/4.1/utilities/spacing/ #水平居中

只需为你想要的div或标签使用一个类,text-center。我认为它可能会很好。它是一个用于文本对齐中心的引导类。

下面是一些文本对齐引导类:

text-left, text-right, text-justify, etc.
<div class="row">
 <div class="col-md-12 text-center">
  <h1>Bootstrap starter template</h1>
  <p>Example text.</p>
 </div>
</div>