自举5中流体容器内空间的划分

Question

我有一个液体容器，它像这样分开

<div class="container-fluid">
<div class="row">
<div class="col-3">
sidebar
</div>
<div class="col-7">
top slider
</div>
<div class="col-2">
big button
</div>
</div>
</div>

我想要的下一部分是在col-7 + col-2下面有4个div占据区域。

基本上我想要这样的东西

​

我已经尝试在现有行下创建另一个行，并有一个空的col-1-3，但是我想要的四列没有到位。下面的四栏怎么做呢？

Answer 1

这是我最好的机会。但是右边的row是一个新的row，所以它也有12 column。

​

div {border: solid coral;}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<section class="container">
  <section class="row text-center">
    <div class="col-3">
      Col-3
    </div>
    <section class="col">
      <section class="row row-cols-4">
        <div class="col-8">Col-8</div>
        <div class="col-4">Col-4</div>
        <div class="col">Col</div>
        <div class="col">Col</div>
        <div class="col">Col</div>
        <div class="col">Col</div>
        <div class="col">Col</div>
        <div class="col">Col</div>
        <div class="col">Col</div>
        <div class="col">Col</div>
      </section>
    </section>
  </section>
</section>

​