Bootstrap 嵌套布局（一列 2 列）

Question

我正在尝试在引导程序中布局一个网格，该网格包含在完整的 12 列布局的桌面上，其中有一个 8 列网格和一个 4 列网格。 8 列网格用图像/文本填充，4 列网格由其自身的 2 个元素组成，彼此下方包含图像/文本。

在较小的断点上，布局应该简单地显示三个相同大小的元素。

我摆弄了一下，但我没有让它工作。在下面，您还可以在 html 旁边找到我想要实现的草图。有什么提示吗？我不认为这对于 bootstrap 4 来说是开箱即用的。

    <section>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-8">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi
                            porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio
                            doloremque molestiae harum! Rem!</p>
                    </div>
                    <div class="col-md-4">
                        <div class="row">

                            <div class="col-md-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
                                ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate
                                sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
                            </div>
                            <div class="col-md-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
                                ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate
                                sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
                            </div>
                        </div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi
                            porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio
                            doloremque molestiae harum! Rem!</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

草图如下：

Answer 1

您需要指定较小的 col 宽度。你还有一个额外的不必要的行和 col 包装它。以下是您正在寻找的工作示例。为任何小于 md 的屏幕添加了col-12 类

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio doloremque molestiae harum! Rem!</p>
    </div>
    <div class="col-12 col-md-4">
      <div class="row">
        <div class="col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
        </div>
        <div class="col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
        </div>
      </div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio doloremque molestiae harum! Rem!</p>
    </div>
  </div>
</div>

Answer 2

请试试这个 sn-p。

.row {
  margin: 20px 0;
}

.col .card {
  height: calc(100% - 10px);
}

.card{
  margin-bottom: 10px;
}

.card img {
  width: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

 <div class="container">
  <div class="row">
    <div class="col col-sm">
      <div class="card">
        <img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
        <div class="card-body">
          <p>Some text goes here Some text goes here Some text goes here</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="card">
        <img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
        <div class="card-body">
          <p>Some text Some text goes here Some text goes here Some text goes here</p>
        </div>
      </div>
      <div class="card">
        <img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
        <div class="card-body">
          <p>Some text Some text goes here Some text goes here Some text goes here</p>
        </div>
      </div>
    </div>
  </div>
</div>