对齐两个div水平并排中心的网页端使用引导CSS

请参考下面的代码是什么我想对齐两个div水平并排中心的网页端使用引导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

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

来源

2014-03-03 SivaRajini

125

这应该做的伎俩：

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

有引导文档的网格系统部分的读来熟悉引导的电网是如何工作的：

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

来源

2014-03-03 15:02:02

谢谢。我可以知道什么是col-xs-6？ id div div count意味着如何修改这个 – SivaRajini

col-xs-6分配可用12列网格的一半。如果您阅读我在答案中链接到的Bootstrap文档，那么在经过一些试验和错误之后，您应该都有所了解:-) –

当窗口大小调整或屏幕分辨率更改时它是否可以工作？ – SivaRajini

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

应该做的伎俩。

来源

2014-03-03 15:05:16 Ranveer

要对齐两个div水平，你只需要两班结合引导的：方法如下：

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

来源

2017-01-02 05:24:06

对齐两个div水平并排中心的网页端使用引导CSS

回答

相关问题