水平并排的两个div divs使用bootstrap css

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

<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 

我想要使​​用引导CSS水平alignment两个div中心到页面。 我怎样才能做到这一点 ? 我不想使用简单的CSS和浮动的概念来做到这一点。 因为我需要利用引导CSS的工作在各种布局(即所有的窗口大小和分辨率),而不是使用媒体查询。

这应该做的伎俩:

 <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

使用引导类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> 

应该做的伎俩。

要水平alignment两个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> 

表格也可以用来放置元素并排

例如)如果你需要放置一个图像和一些文字并排表可以帮助你

 <table class="table table-condensed"> <td class="active">Place image here</td> <td class="success">Place text here</td> </table>