如何将一些文本放在bootstrap行的中心？

Question

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

Here is my Bootply

以下是一些代码：

<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：为了澄清，我需要将文本叠加在同一行上。

Answer 1

添加

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

在所有这些列之前

<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>

但是如果你想要只采用一定数量的列，那么你需要另一行和像这样的偏移

<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>

编辑：如果你希望那个文本在这两个跨度上跨越/浮动，那么你将需要类似于＆＃34; Shawn Taylor＆＃34;建议

<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>

Answer 2

<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>

你只需要把＃34;文本中心＆＃34;在任何您希望文本居中的父div上。

Updated Bootply

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

<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>

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

Answer 3

位置：相对和位置：中心内的父行和子行的绝对值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>

它不漂亮，但它有效！

http://www.bootply.com/PsWW8czbb8