使用引导css将两个div并排对齐到页面上

Please refer below code what i tried

请参考下面我所尝试的代码

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

output :

输出:

First Div
SecondDiv

Expected output :

预期的输出:

                      First Div        Second Div

i want to align the two divs horizontally center to page using bootstrap css. how can i do this ? i dont want to use simple css and floating concept to do this. because i need to make use of the bootstrap css to work in all kind of layouts (i.e. all window size and resolutions ) instead of using media query.

我想使用引导css将两个divs水平中心对齐到页面。我该怎么做呢?我不想使用简单的css和浮动概念来实现这一点。因为我需要使用引导css来处理各种布局(即所有窗口大小和分辨率)，而不是使用媒体查询。

4 个解决方案

#1

128

This should do the trick:

这应该可以做到:

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

Have a read of the grid system section of the Bootstrap docs to familiarise yourself with how Bootstrap's grids work:

阅读引导文档的网格系统部分，熟悉引导网格的工作原理:

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

http://getbootstrap.com/css/网格

#2

Use the bootstrap classes col-xx-# and col-xx-offset-#

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

So what is happening here is your screen is getting divided into 12 columns. In col-xx-#, # is the number of columns you cover and offset is the number of columns you leave.

你的屏幕被分成12列。在col-xx-#中，#是您所覆盖的列数，偏移量是您离开的列数。

For xx, in a general website, md is preferred and if you want your layout to look the same in a mobile device, xs is preferred.

对于xx来说，在一般的网站上，md是首选，如果你想让你的布局在移动设备上看起来一样，xs是首选。

With what I can make of your requirement,

根据你的要求，

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

Should do the trick.

应该足够了。

#3

To align two divs horizontally you just have to combine two classes of Bootstrap: Here's how:

要使两个divs水平对齐，您只需合并两个类的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>

#4

<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>

This does the trick.

这就可以了。

#1

128