使用 bootstrap css 将两个 div 水平并排居中对齐到页面

Question

请参考下面的代码我试过的

<div class="row">
  <div class="center-block">First Div</div>
  <div class="center-block">Second DIV </div>
</div>

输出 ：

 First Div
SecondDiv

预期输出：

                       First Div        Second Div

我想使用 bootstrap css 将两个 div 水平居中对齐到页面。我怎样才能做到这一点 ？我不想使用简单的 css 和浮动概念来做到这一点。因为我需要使用 bootstrap css 在所有类型的布局（即所有窗口大小和分辨率）中工作，而不是使用媒体查询。

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

Answer 1

这应该可以解决问题：

 <div class="container">
    <div class="row">
        <div class="col-xs-6">
            ONE
        </div>
        <div class="col-xs-6">
            TWO
        </div>
    </div>
</div>

阅读 Bootstrap 文档的网格系统部分，熟悉 Bootstrap 网格的工作原理：

http://getbootstrap.com/css/#grid

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

Answer 2

使用引导类 col-xx-# 和 col-xx-offset-#

所以这里发生的是你的屏幕被分成 12 列。在 col-xx-# 中， # 是你覆盖的列数， offset 是你留下的列数。

对于 xx ，在一般网站中， md 是首选，如果你希望你的布局在移动设备上看起来相同， xs

我可以根据你的要求，

 <div class="row">
  <div class="col-md-4">First Div</div>
  <div class="col-md-8">Second DIV </div>
</div>

应该做的伎俩。

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