在引导程序 5 中划分流体容器内的空间答案

【问题标题】：Dividing space inside fluid container in bootstrap 5在引导程序 5 中划分流体容器内的空间
【发布时间】：2022-01-04 07:29:56
【问题描述】：

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

<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-3，但我想要的四列没有到位。我怎样才能拥有像下面这样的四列？

【问题讨论】：

您是否可能只有两个主要列col-3 和col-9，该图右侧的所有内容都是右侧列内的card？侧栏位于左列中。

标签： html css twitter-bootstrap bootstrap-5

【解决方案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>

【讨论】：

这非常非常优雅。我想知道是否有办法仍然从那些较小的盒子中获得响应。