引导列对齐问题

Question

我正在复制一个类似于此页面https://www.ideo.com/blog的博客模板

问题是，我无法让网格按照我需要的方式对齐。我已经在https://jsfiddle.net/f74d0ngr/9/这个小提琴上上传了我的版本@ （确保将输出窗口调整为更大的尺寸以了解问题。）

我需要 latest - 2 和 latest - 3 帖子直接在 latest - 1 下对齐。

这是我的代码

<div id="Blog-body">
      <div class="container">
        <div class="row">
          <div class="col-lg-8">
              <p class="text-center section-head" id="The-Latest">The Latest</p>
              <img src="img/Blog1.png" alt="" class="blog-img">
              <p class="lead less-spacing">Blog | Lorem Ipsum</p>
              <h3 class="title">Inviting Algorithms to the Design Team</h3>
          </div>

          <div class="col-lg-4">
              <p class="text-center section-head" id="The-Latest">Most Read</p>
              <p class="lead less-spacing">Blog | Lorem Ipsum</p>
              <h3 class="">The Best Managers Understand Their Employees’ Emotions—And Their Own</h3>

              <p class="lead less-spacing">Blog | Lorem Ipsum</p>
              <h3 class="">The Best Managers Understand Their Employees’ Emotions—And Their Own</h3>
              <p class="lead less-spacing">Blog | Lorem Ipsum</p>
              <h3 class="">The Best Managers Understand Their Employees’ Emotions—And Their Own</h3>
                   <p class="lead less-spacing">Blog | Lorem Ipsum</p>
              <h3 class="">The Best Managers Understand Their Employees’ Emotions—And Their Own</h3>

          </div>
        </div>
        <div class="row">

            <div class="col-lg-4">
                <p class="text-center section-head" id="The-Latest">The Latest</p>
                <img src="img/Blog1.png" alt="" class="blog-img">
                <p class="lead less-spacing">Blog | Lorem Ipsum</p>
                <h3 class="title">Inviting Algorithms to the Design Team</h3>

            </div>
            <div class="col-lg-4">
                <p class="text-center section-head" id="The-Latest">The Latest</p>
                <img src="img/Blog1.png" alt="" class="blog-img">
                <p class="lead less-spacing">Blog | Lorem Ipsum</p>
                <h3 class="title">Inviting Algorithms to the Design Team</h3>

            </div>


        </div>   
      </div>
    </div>

CSS

.section-head{

  background-color: #fbef39;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  line-height: 50px; 
}

我尝试将所有部分放在不同的行中，但无法获得所需的对齐方式。有什么建议可以解决这个问题吗？

Answer 1

您的代码中的最新 2 和最新 3 部分应该在 <div class="col-lg-8"> 和 Latest1 中，但在不同的行中。 我在这里更新了代码：https://jsfiddle.net/zedqugms/