使用 bootstrap 网格将行中的文本居中

Question

我开始为一个项目编写模型。基本上，我使用引导网格来获得如下结构：

 <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：我知道我可以通过其他方式做到这一点，但我只是想知道是否有某种方法可以用网格实现这一点。

谢谢！

原文由 Nicolas Barlogis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

See you have already used .text-center on you .project-name which align text to center , so what I could suggest is that try pseudo selector ::before as below ,

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

原文由 frnt 发布，翻译遵循 CC BY-SA 3.0 许可协议

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>

原文由 Zachary St Amant 发布，翻译遵循 CC BY-SA 3.0 许可协议