2

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

这是我的 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>

另外：为了澄清，我需要将文本覆盖在同一行。

4

3 回答 3

8

只需添加

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

编辑：如果您希望该文本从字面上跨越/浮动在这两个跨度上，那么您将需要类似“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>
于 2014-06-27T13:30:06.027 回答
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>

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

更新 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）。

于 2014-06-27T16:47:17.517 回答
2

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>

它不漂亮，但它有效！

http://www.bootply.com/PsWW8czbb8

于 2014-06-28T04:01:40.697 回答