使用引导 css 将两个 div 水平并排并排到页面上

问题描述

请参考下面的代码我试过

<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 将两个 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-#中，#是您覆盖的列数，offset 是您离开的列数。

对于 xx，在通用网站中，首选 md，如果您希望在移动设备中使用布局，xs 是首选。

我可以根据您的要求，

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

应该做的伎俩

参考文献

• Align two divs horizontally side by side center to the page using bootstrap css

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。