使用bootstrap css将两个div水平地并排排列在页面中央。

本文是小编为大家收集整理的关于使用bootstrap css将两个div水平地并排排列在页面中央。的处理/解决方法，可以参考本文帮助大家快速定位并解决问题，中文翻译不准确的可切换到English标签页查看源文。

中文
English

问题描述

本文来自：IT宝库（https://www.itbaoku.cn）

请参阅下面的代码我尝试的内容

<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将两个Divs水平中心与页面对齐.我怎样才能做到这一点 ?我不想使用简单的CSS和浮动概念来做到这一点.因为我需要利用Bootstrap CSS在各种布局(即所有窗口大小和分辨率)中工作，而不是使用媒体查询.

其他推荐答案

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

应该做这个问题.

其他推荐答案

替代Bootstrap 4解决方案(这样，您可以使用小于 col-6 的DIVS):

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

本文地址：https://www.itbaoku.cn/post/1860647.html

百度翻译此文有道翻译此文

问题描述

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.

其他推荐答案

Use the bootstrap classes col-xx-# and 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.

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.

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.

其他推荐答案

Alternate Bootstrap 4 solution (this way you can use divs which are smaller than col-6):

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

👉不是你要找的答案？问题还没解决？点击这里让编程助手帮你吧！👈

上一篇：CSS颜色与背景颜色与背景？

下一篇：CSS图像最大宽度设置为原始图像大小？