引導程序中的嵌套網格布局

Question

我需要創建一個有兩列的網格，在 sm 和更大的屏幕上，右邊的寬度應該根據其內容自行調整，左邊的應該占據 rest 的空間。 在 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 >

右列的寬度現在似乎可以容納兩個子列（如果它們在同一行中）。 如何強制右列根據最寬的子列寬度調整其寬度？

Answer 1

您不需要嵌套網格來實現這一點。 使用flex-grow-1 。

請參閱下面的代碼段。

 <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>