Html 使用引导css将两个div并排水平对齐到页面中心

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

<div class="row">
  <div class="center-block">First Div</div>
  <div class="center-block">Second DIV </div>
</div>

预期产出：

                      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网格的工作原理：

---

使用引导类

col xx-#

和

col xx offset-#

所以这里发生的是你的屏幕被分成12列。在

列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，只需组合两类引导： 以下是方法：

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

第一组
第二组

第一组
第二组

---

这就做到了。

备用引导4解决方案（通过这种方式，您可以使用小于col-6的DIV）：

两列中的一列
两列中的一列

---

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

他说要使用

col xx offset-#

，但偏移量不是这样使用的

---

如果您浪费时间尝试使用

col xx offset-#

，正如我根据他的回答所做的那样，解决方案是使用

offset xx-#

我所做的备选方案：

    <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而不是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>

//css网格：https://www.w3schools.com/css/tryit.asp?filename=trycss_grid
// https://css-tricks.com/snippets/css/complete-guide-grid/
.网格容器{
显示：网格；
网格模板列：auto-auto；//20vw 40vw，因为我有dt和dd
填充：10px；
文本对齐：左对齐；
证明内容：中心；
对齐项目：居中；
}
.grid容器>div{
填充：20px；
}
1.
2.
3.
4.
5.
6.
7.
8.

确保将“行”包装在类“容器”中。还可以在html中添加对引导的引用。
像这样的方法应该会奏效：
让我们学习

一个
两个
三

如果有人要使用Bootstrap 5（截至日期的beta版），以下是对我有效的方法。在我的例子中，我必须将卡片标题部分中的两个项目并排对齐：

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

100多个部件
Lorem ipsum dolor sit amet，Adipsing Eliter，sed diam
非平凡的临时劳动

---

这里的问题是

在

和

ml auto

之间调整内容。你可以在官方链接上获得更多信息。还有一个实际工作的例子。

谢谢。我能知道什么是col-xs-6吗？id div count增加意味着如何修改thiscol-xs-6分配了可用12列网格的一半。如果你阅读了我在回答中链接到的引导文档，那么在经过一些尝试和错误之后，这一切都应该是有意义的：-）为什么

xs

而不是

md

？@Alexander-使用xs意味着两个div将在从手机到桌面的所有屏幕大小上并排出现。对于引导4，这应该是

col-6

（删除了

xs

中缀）

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

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