请参考下面我尝试过的代码
<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 来处理各种布局（即所有窗口大小和分辨率），而不是使用媒体查询。
【问题讨论】：
标签： html css twitter-bootstrap
这应该可以解决问题：
<div class="container">
<div class="row">
<div class="col-xs-6">
ONE
</div>
<div class="col-xs-6">
TWO
</div>
</div>
</div>
阅读 Bootstrap 文档的网格系统部分以熟悉 Bootstrap 网格的工作原理：
【讨论】：
xs 而不是md？
col-6 的引导程序 4（删除了 xs 中缀）getbootstrap.com/docs/4.0/migration/#global-changes
使用引导类 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>
应该做的伎俩。
【讨论】：
要水平对齐两个 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>
【讨论】：
<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>
这就是诀窍。
【讨论】：
备用 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>
【讨论】：
Ranveer 提供的响应（上面的第二个答案）绝对不起作用。
他说要使用col-xx-offset-#，但这不是使用偏移量的方式。
如果您浪费时间尝试使用col-xx-offset-#，就像我根据他的回答所做的那样，解决方案是使用offset-xx-#。
【讨论】：
我编写 Angular 的替代方案：
<div class="form-row">
<div class="form-group col-md-7">
Left
</div>
<div class="form-group col-md-5">
Right
</div>
</div>
【讨论】：
如果您真正想要的是拥有更多结构化数据，我推荐 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>
【讨论】：
Make sure you wrap your "row" inside the class "container" . Also add reference to bootstrap in your html.
Something like this should work:
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<p>lets learn!</p>
<div class="container">
<div class="row">
<div class="col-lg-6" style="background-color: red;">
ONE
</div>
<div class="col-lg-2" style="background-color: blue;">
TWO
</div>
<div class="col-lg-4" style="background-color: green;">
THREE
</div>
</div>
</div>
</body>
</html>
【讨论】：
任何想要使用 Bootstrap 5（截至日期为测试版）的人，这对我有用。就我而言，我必须并排对齐卡片标题部分中的两个项目：
<div class="card small-card text-white bg-secondary">
<div class="d-flex justify-content-between card-header">
<div class="col-md-6 col-sm-6">
<h4>100+ Components</h4>
</div>
<div class="ml-auto">
<!--<div class="col-md-6 col-sm-6 ml-auto"> -->
<i class="data-feather hoverzoom" data-feather="grid"></i>
</div>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet, adipscing elitr, sed diam
nonumy eirmod tempor ividunt labor dolore magna.</p>
</div>
</div>
这里的问题是justify-content-between 和ml-auto。您可以在官方链接获得更多信息here。还有一个实时工作示例here。
【讨论】：
在 Bootstrap 4+ 中，col-xs-6 不存在。而是使用col-6:
<div class="container">
<div class="row">
<div class="col-6">
ONE
</div>
<div class="col-6">
TWO
</div>
</div>
</div>
【讨论】：