引导程序中的嵌套网格布局答案

【问题标题】：nested grid layout in bootstrap引导程序中的嵌套网格布局
【发布时间】：2022-12-01 17:11:09
【问题描述】：

我需要创建一个有两列的网格，在 sm 和更大的屏幕上，右边的宽度应该根据其内容自行调整，左边的应该占据其余的空间。在 xs 屏幕上有两行

<div className='row' >
        <div className='col text-light bg-success'>
          large left column
        </div>

        <div className='col-sm-auto' >
          right column
        </div >
</div >

在 >=sm 屏幕上看起来像这样

在 xs 屏幕上像这样：

这正是我需要的

但是如果不是纯文本，那么右列中有另一行有两个子列：

<div className='row' >

        <div className='col text-light bg-success'>
          large left column
        </div>

        <div className='col-sm-auto' >
          <div className='row row-cols-sm-1' >
            <div className='col text-light bg-secondary'>subcolumn</div>
            <div className='col text-light bg-primary '>subcolumn</div>
          </div>
        </div >

      </div >

右列的宽度现在似乎可以容纳两个子列（如果它们在同一行中）。如何强制右列根据最宽的子列宽度调整其宽度？

【问题讨论】：

标签： html css grid bootstrap-5

【解决方案1】：

您不需要嵌套网格来实现这一点。使用flex-grow-1。

请参见下面的 sn-p。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<div class='row d-flex'>

  <div class='col-sm-auto text-light bg-success flex-grow-1'>
    large left column
  </div>

  <div class='col-sm-auto ps-sm-0'>
    <div class='text-light bg-secondary'>subcolumn</div>
    <div class='text-light bg-primary'>subcolumn subcolumn subcolumn subcolumn</div>
  </div>

</div>

【讨论】：