如何在引导行的中心放置一些文本？

chuck 发表于 Dev

卡盘

有一行有四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>

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

德勒

只需添加

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。