将 space 内的液体容器分成 bootstrap 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>

我想要的下一部分是让 4 个 div 占据 col-7 + col-2

下面的区域

基本上我想要这样的东西

我已经尝试在现有行下方创建另一行并有一个空白的 col-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>

将 space 内的液体容器分成 bootstrap 5

Dividing space inside fluid container in bootstrap 5

html

css

twitter-bootstrap

bootstrap-5