我如何将三个元素与 bootstrap 4 对齐？答案

【问题标题】：How i align three elements with bootstrap 4?我如何将三个元素与 bootstrap 4 对齐？
【发布时间】：2018-03-18 00:01:18
【问题描述】：

在升级到 bootstrap 4 之前，我正在这样做：

<div class="container">
     <div class="row">
          <div class="col-md-6">
              My bloc 1
          </div>
          <div class="col-md-6">
              My bloc 2
          </div>
          <div class="col-md-6">
              My bloc 3
          </div>
     </div>
</div>

在 Bootstrap 3 中，bloc 1 的内容比 bloc 2 和 3 更重要，它看起来像：

但在 Bootstrap 4 中，它看起来像这样：

如何在 Bootstrap 4 中完成这项工作。我在 Bootstrap 4 文档中找不到解决方案（或者我是盲人）。请不要用 CSS 之类的方式回答我（这不仅仅是一个示例）：

#bloc2{
    display: block;
}

或者类似的东西，这是一个例子，我在另一个页面中有不同块的类似案例。

谢谢

【问题讨论】：

您忘记在 <div> 中使用 container 类，它汇集了 3 个 row。
@FoxCy 我这样做了，只是在这里简化我的代码，将编辑

标签： css twitter-bootstrap grid

【解决方案1】：

要对齐 3 个元素，您必须永远不要超过每个 row 的 12 列。
请试试这个：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<div class="container">
     <div class="row">
          <div class="col-md-6">
            My block 1
           </div>
     
        <div class="col-md-6">
            <div class="row">
            My block 2
            </div>
            <div class="row">
            My block 3
            </div>
           </div>
        </div>
     </div>

【讨论】：

它产生三列，但我想要与我的第一张图片相同的结果（使用引导程序 3）。我不应该为此使用 Bootstrap 吗？
很抱歉，我在 bootstrap 3 中看不到你的照片我的工作办公室有代理你在其他网站上有例子吗？
像这样，但 bloc 1 和 2 是我的 bloc 2，bloc 3 和 4 是我的 bloc 3（图像是我的 bloc 1）google.ch/…:
图片是你的第 1 块？
是的图片是我的集团 1

【解决方案2】：

所以@FoxCy 帮我解决这个问题。

答案是：

<div class="container">
      <div class="row">
          <div class="col-md-6">
               My bloc 1
          </div>
          <div class="col-md-6">
              <div class="row">My bloc 2</div>
              <div class="row">My bloc 3</div>
          </div>
     </div>
</div>

【讨论】：