Bootstrap 垂直堆叠 2 列

Question

我已经阅读了几个小时的文档并检查了所有演示并搜索了 SO，但我无法弄清楚如何实现以下布局：

这就是我所做的，输出结果看起来像我需要的，但我不确定它是否正确：

<div class="container">
  <div class="row">
    <div class="w-75 rounded bg-dark">
      <p>
        This is a sample
      </p>
    </div>
    <div class="w-25">
      <div class="col rounded bg-dark">
        <p>
        This is a sample
        </p>
      </div>
      <div class="col rounded bg-dark">
        <p>
        This is a sample
        </p>
      </div>
    </div>
  </div>
</div>

输出在这里：https://jsfiddle.net/ezt5fyL1/

Answer 1

正确的做法是嵌套网格...

<div class="container">
    <div class="row">
        <div class="col-9 rounded bg-dark">
            <p> This is a sample </p>
        </div>
        <div class="col-3">
            <div class="row gy-1 gx-1">
                <div class="col-12 rounded bg-dark">
                    <p> This is a sample </p>
                </div>
                <div class="col-12 rounded bg-dark">
                    <p> This is a sample </p>
                </div>
            </div>
        </div>
    </div>
</div>

codeply