有一行有四个 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>
另外:为了澄清,我需要将文本叠加在同一行上。
最佳答案
只需添加
<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>
关于css - 如何将一些文本放在 Bootstrap 行的中心?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24452942/