Question

我开始为项目编写模型。基本上，我使用bootstrap网格来获得这样的结构：

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-2">...</div>
    <div class="col-xs-6">Main Title</div>
    <div class="col-xs-4">...</div>
  </div>
</div>

这是一个完整的小提琴：https://jsfiddle.net/f8fn9Los/4/

我想要做的是将主标题居中，而不是在其列中，而是在整行中。有没有办法做到这一点，同时保持这种网格结构？

Ps：我知道我可以用其他方式做到这一点，但我只是想知道是否有某种方法可以通过网格实现这一目标。

谢谢！

Answer 1

看到您已使用.text-center .project-name将文字与center对齐，所以我建议的是尝试pseudo selector ::before，如下所示，

.text-center::before{
  content:"";
  margin-left:calc(100% - 75%);
}

Answer 2

这就是你要找的东西。

<section>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 center-block text-center">
        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
  </div>
</section>

Answer 3

您只能为Main Tittle

选择另一行

<div class="container-fluid">
  <div class="row">
     <h1 class="text-center">Project Name</h1>
  </div>
</div>

然后你可以为其他元素添加另一行。

Answer 4

您可以尝试使用col-xs-offset- *类引导程序。

有关详细信息，请查看此链接：enter link description here

使用引导网格将文本居中排成行

4 个答案: