Html 使用引导 css 将两个 div 并排中心与页面水平对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22150006/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align two divs horizontally side by side center to the page using bootstrap css
提问by SivaRajini
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 将两个 div 水平居中对齐到页面。我怎样才能做到这一点 ？我不想使用简单的 css 和浮动概念来做到这一点。因为我需要使用 bootstrap css 来处理所有类型的布局（即所有窗口大小和分辨率），而不是使用媒体查询。
回答by Billy Moat
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:
阅读 Bootstrap 文档的网格系统部分以熟悉 Bootstrap 网格的工作原理：
回答by Ranveer
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 列。In col-xx-#,#是您覆盖的列数，offset 是您离开的列数。
For xx, in a general website, mdis preferred and if you want your layout to look the same in a mobile device, xsis 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.
应该做的伎俩。
回答by ErTR
Alternate Bootstrap 4 solution (this way you can use divs which are smaller than col-6):
替代 Bootstrap 4 解决方案（这样您可以使用小于col-6 的div ）：
<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>
回答by Oluwasayo Babalola
<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.
这就是诀窍。
回答by Dev Rathi
To align two divs horizontally you just have to combine two classes of Bootstrap: Here's how:
要水平对齐两个 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>
回答by Michael Novello
The response provided by Ranveer (second answer above) absolutely does NOT work.
Ranveer 提供的响应（上面的第二个答案）绝对不起作用。
He says to use col-xx-offset-#, but that is not how offsets are used.
他说要使用col-xx-offset-#，但这不是使用偏移量的方式。
If you wasted your time trying to use col-xx-offset-#, as I did based on his answer, the solution is to use offset-xx-#.
如果您浪费时间尝试使用col-xx-offset-#，就像我根据他的回答所做的那样，解决方案是使用offset-xx-#.
回答by serge klokov
Alternative which I did programming Angular:
我对 Angular 进行编程的替代方法：
<div class="form-row">
<div class="form-group col-md-7">
Left
</div>
<div class="form-group col-md-5">
Right
</div>
</div>
回答by Yuqiu G.
I recommend css grid over bootstrap if what you really want, is to have more structured data, e.g. a side by side table with multiple rows, because you don't have to add class name for every child:
如果您真正想要的是具有更多结构化数据，例如具有多行的并排表，我建议使用 css grid over bootstrap，因为您不必为每个孩子添加类名：
// css-grid: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid
// https://css-tricks.com/snippets/css/complete-guide-grid/
.grid-container {
display: grid;
grid-template-columns: auto auto; // 20vw 40vw for me because I have dt and dd
padding: 10px;
text-align: left;
justify-content: center;
align-items: center;
}
.grid-container > div {
padding: 20px;
}
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
