Question

请参考以下代码我尝试了什么

<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和浮动概念来做到这一点。因为我需要使用bootstrap css来处理所有类型的布局（即所有窗口大小和分辨率），而不是使用媒体查询。

Answer 1

这应该可以解决问题：

<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

Answer 2

使用引导类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>

应该做的伎俩。

Answer 3

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

More

Answer 4

要水平对齐两个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>

Answer 5

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

这就是诀窍。

Answer 6

Ranveer提供的响应（上面的第二个答案）绝对不起作用。

他说要使用col-xx-offset-#，但这不是偏移量的使用方式。

如果像我根据他的回答那样浪费时间尝试使用col-xx-offset-#，解决方案就是使用offset-xx-#。

Answer 7

我对Angular进行编程的替代方法：

    <div class="form-row">
        <div class="form-group col-md-7">
             Left
        </div>
        <div class="form-group col-md-5">
             Right
        </div>
    </div>

Answer 8

如果您真正想要的是具有更多结构化数据，例如，建议在引导程序上使用CSS网格。具有多行的并排表，因为您不必为每个孩子添加类名：

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

css-grid

Answer 9

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>

Answer 10

任何打算使用 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 css将两个div水平并排对齐到页面

10 个答案: