我不知道如何构建一个小型的流体网格（使用 Bootstrap）来添加第三列

Question

我正在尝试使用 Bootstrap 的网格系统构建一个小网格，但我无法弄清楚。

问题：我正在尝试构建 3 列 - 第一列是 1 个大图片，其他 2 列在彼此下方有 2 组“事实”，总共 4 个 2x2 事实。我在创建第二列旁边的第三列时遇到问题，而且我的代码很混乱。可以采取什么措施来解决它？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<h1>Grid Layout</h1>

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-md-12 col-lg-8">
      <div class="row">
        <div class="col-12 col-sm-12">
          <img src="https://source.unsplash.com/Sg3XwuEpybU" alt="">
        </div>
      </div>
    </div>

    <div class="col-12 col-lg-2">Fun fact #1: Dogs are not color blind. <br>
      <br>Fun fact #2: Tail wags have multiple meanings.
    </div>
  </div>

  <div class="col-12 col-lg-2">Fun fact #3: Not yet researched. <br>
    <br>Fun fact #4: Not yet researched. </div>
</div>
</div>

Answer 1

您的第三列位于行元素之外。使用好的编辑器，以便您在工作时拥有正确的格式，从而更容易发现这些内容。

顺便说一句，您的嵌套行和列似乎没有目的。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<h1>Grid Layout</h1>

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-lg-8">
      <img src="https://source.unsplash.com/Sg3XwuEpybU" alt="">
    </div>

    <div class="col-12 col-lg-2">Fun fact #1: Dogs are not color blind. <br>
      <br>Fun fact #2: Tail wags have multiple meanings.
    </div>

    <div class="col-12 col-lg-2">Fun fact #3: Not yet researched. <br>
      <br>Fun fact #4: Not yet researched. </div>
  </div>
</div>