使用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来处理所有类型的布局(即所有窗口大小和分辨率),而不是使用媒体查询.

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

Answer 2

使用bootstrap类col-xx-#和col-xx-offset-#

所以这里发生的事情是你的屏幕分为12列.在col-xx-#,#您覆盖的列数和偏移量是您离开的列数.

因为xx,在一般网站中,md首选,如果您希望您的布局在移动设备中看起来相同,xs则首选.

凭借我能满足您的要求,

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

应该做的伎俩.

Answer 3

替代 Bootstrap 4 解决方案（这样您可以使用小于col-6 的div ）：

<div class="container">
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

更多的

Answer 4

要水平对齐两个 div，您只需组合两个 Bootstrap 类：具体方法如下：

<div class ="container-fluid">
  <div class ="row">
    <div class ="col-md-6 col-sm-6">
        First Div
    </div>
    <div class ="col-md-6 col-sm-6">
        Second Div
     </div>
  </div>
</div>

Answer 5

<div class="container">
    <div class="row">
       <div class="col-xs-6 col-sm-6 col-md-6">
          First Div
       </div>
       <div class="col-xs-6 col-sm-6 col-md-6">
          Second Div
       </div>
   </div>

这可以解决问题。