html bootstrap中的嵌套网格布局

fdx2calv 于 2022-12-02 发布在 Bootstrap

关注(0)|答案(1)|浏览(169)

我需要创建一个有两列的网格，在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

来源：https://stackoverflow.com/questions/74639037/nested-grid-layout-in-bootstrap

1条答案

按热度按时间

pjngdqdw1#

您不需要嵌套网格来实现这一点。使用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>

赞(0）回复(0）举报 2022-12-02

我来回答

html bootstrap中的嵌套网格布局

1条答案

相关问题

热门标签

最新问答