twitter-bootstrap 如何将一些文本放在引导行的中心？

How to put some text in the center of a bootstrap row?

提问by Chuck

There is a row which has four col-sm-3columns. I need to put some text in the center of this row which means the text need to span the 2nd column and the 3rd column.

有一行有四col-sm-3列。我需要在这一行的中心放置一些文本，这意味着文本需要跨越第二列和第三列。

Here is my Bootply

这是我的 Bootply

Here's some code:

这是一些代码：

<div class="row">
  <div class="col-md-3" style="background-color:yellow">123</div>
  <div class="col-md-3" style="background-color:green">456</div>
  <div class="col-md-3" style="background-color:red">789</div>
  <div class="col-md-3" style="background-color:grey">000</div>
</div>

Plus: To clarify,I need the text to be overlayed on the same line.

另外：为了澄清，我需要将文本叠加在同一行上。

回答by Deele

Just add

只需添加

<div class="text-center">Center aligned text.</div>

Before all of those columns like this

在所有像这样的列之前

<div class="row">
  <div class="text-center">Center aligned text.</div>
  <div class="col-md-3" style="background-color:yellow">123</div>
  <div class="col-md-3" style="background-color:green">456</div>
  <div class="col-md-3" style="background-color:red">789</div>
  <div class="col-md-3" style="background-color:grey">000</div>
</div>

But if you want something to take only set amount of columns, then you need another row and offset like this

但是，如果您希望某些内容只占用一定数量的列，那么您需要另一行和这样的偏移量

<div class="row">
  <div class="col-md-offset-3 col-md-6">
    <div class="text-center">Center aligned text.</div>
  </div>
</div>
<div class="row">
  <div class="col-md-3" style="background-color:yellow">123</div>
  <div class="col-md-3" style="background-color:green">456</div>
  <div class="col-md-3" style="background-color:red">789</div>
  <div class="col-md-3" style="background-color:grey">000</div>
</div>

EDIT: If you want that text to span/float literally over those two spans, then you will need something similar like "Shawn Taylor" suggested

编辑：如果您希望该文本跨越/浮动在这两个跨度上，那么您将需要类似“Shawn Taylor”建议的内容

<div class="row">
  <div class="col-md-3" style="background-color:yellow">123</div>
  <div class="col-md-6" style="position:relative;">
    <div style="position: absolute; z-index: 2; left: 0; top: 0; width: 100%;" class="text-center">Center aligned text.</div>
    <div class="row">
      <div class="col-md-6" style="background-color:green">456</div>
      <div class="col-md-6" style="background-color:red">789</div>
    </div>
  </div>
  <div class="col-md-3" style="background-color:grey">000</div>
</div>

回答by Aibrean

<div class="row">
  <div class="col-md-3 text-center" style="background-color:yellow">123</div>
  <div class="col-md-3 text-center" style="background-color:green">456</div>
  <div class="col-md-3 text-center" style="background-color:red">789</div>
  <div class="col-md-3 text-center" style="background-color:grey">000</div>
</div>

You just need to put "text-center" on any parent div that you want text centered into.

您只需要将“文本中心”放在您希望文本居中的任何父 div 上。

Updated Bootply

更新 Bootply

If you want text spanned across above everything, then you would do

如果您希望文本跨越所有内容，那么您可以这样做

<div class="row">
  <div class="col-md-offset-3 text-center col-md-6">Text Centered</div>
  <div class="clearfix"></div>
  <div class="col-md-3 text-center" style="background-color:yellow">
    123
  </div>
  <div class="col-md-3 text-center" style="background-color:green">456</div>
  <div class="col-md-3 text-center" style="background-color:red">789</div>
  <div class="col-md-3 text-center" style="background-color:grey">000</div>
</div>

Then it won't go past the green and red (http://www.bootply.com/v3UP7Mjy4s).

然后它不会超过绿色和红色（http://www.bootply.com/v3UP7Mjy4s）。

回答by Shawn Taylor

position:relative and position:absolute on a parent and child row within your center 2 columns will sort this out for you:

position:relative 和 position:absolute 在您中心 2 列内的父行和子行上，将为您解决这个问题：

<div class="row">
  <div class="col-md-3 text-center" style="background-color:yellow">123</div>

  <div class="col-md-6" style="position:relative;">
    <div class="row">
      <span class="col-md-12 text-center" style="position:absolute;top:0px;left:0px;z-index:1000;color:white">I'm spanning!</span>
      <div class="col-md-6 text-center" style="background-color:green">456</div>
      <div class="col-md-6 text-center" style="background-color:red">789</div>
    </div>
  </div>

  <div class="col-md-3 text-center" style="background-color:grey">000</div>
</div>

It's not pretty, but it works!

它不漂亮，但它有效！

http://www.bootply.com/PsWW8czbb8

http://www.bootply.com/PsWW8czbb8