css - 如何将一些文本放在 Bootstrap 行的中心？

Question

有一行有四个 col-sm-3 列。我需要在此行的中央放置一些文本，这意味着文本需要跨越第 2 列和第 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>

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

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>

编辑:如果您希望该文本跨越/ float 在这两个跨度上，那么您将需要类似于建议的“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>