Bootstrap5/Flex：復雜的回應式選單-有解無憂

我想要一個回應式選單，它應該始終如下圖所示。溢位內容只需添加一個滾動條：

Bootstrap 5/Flex：復雜的回應式選單

我當前的解決方案在添加內容之前有效：


  <div class="row h-100">

    <div class="col d-flex flex-column h-100">
        <div class="row justify-content-center bg-primary">
          <div class="text-white">
            <div style="height:30px">Fixed height</div>
          </div>
        </div>
        <div class="row justify-content-center bg-secondary flex-grow-1">
          <div class="col-auto ms-auto bg-grey">
            <div class="row">
              <div class="col-12" style="width: 60px">
                Fixed width
              </div>
            </div>
          </div>
          <div class="col d-flex flex-column">
            <div class="row flex-grow-1">
              <div class="col-12 col-xl-6 bg-success">
                Responsive Col 1
              </div>
              <div class="col-12 col-xl-6 bg-danger">
                Responsive Col 2
              </div>
            </div>
          </div>
        </div>

      </div>
  </div>

添加內容后，它看起來像這樣：

Bootstrap 5/Flex：復雜的回應式選單

是否可以保留圖 1 中的高度，并簡單地添加溢位-y：自動？我無法讓它發揮作用。

uj5u.com熱心網友回復：

指定容器的高度，然后為正確的媒體查詢在子項上添加溢位：

.flex-grow-1{
  height: calc(100vh - 30px);
}
@media only screen and (max-width: 1199px){
  .flex-grow-1 > .col-12 {
    height: 50%;
    overflow-y: auto;
  }
}

演示

.flex-grow-1{
  height: calc(100vh - 30px);
}
@media only screen and (max-width: 1199px){
  .flex-grow-1 > .col-12 {
    height: 50%;
    overflow-y: auto;
  }
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row h-100">

  <div class="col d-flex flex-column h-100">
      <div class="row justify-content-center bg-primary">
        <div class="text-white">
          <div style="height:30px">Fixed height</div>
        </div>
      </div>
      <div class="row justify-content-center bg-secondary flex-grow-1">
        <div class="col-auto ms-auto bg-grey">
          <div class="row">
            <div class="col-12" style="width: 60px">
              Fixed width
            </div>
          </div>
        </div>
        <div class="col d-flex flex-column">
          <div class="row flex-grow-1">
            <div class="col-12 col-xl-6 bg-success">
              Responsive Col 1
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt, est quis dapibus consequat, nisi dui semper tortor, ut aliquet risus ipsum in leo. Phasellus lectus quam, sodales at ultrices vel, dignissim tristique sapien. Quisque eget tortor suscipit neque pharetra hendrerit in luctus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at consequat neque. Mauris sit amet ante nibh. Integer lobortis purus ut tristique fringilla. Nullam eget justo ligula. Vivamus ornare lorem fringilla aliquet laoreet. Duis ultricies, metus et porta suscipit, nunc mauris vulputate mi, in placerat lectus massa a nulla. Proin vulputate convallis dolor ultrices porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur tempor viverra felis vitae pharetra. Praesent consequat nulla arcu, non scelerisque orci egestas at.

Nullam volutpat tortor a ante maximus elementum. Integer interdum lectus enim, eu tempus nisl eleifend at. Donec vitae ornare ipsum, vitae rutrum mauris. Vivamus ornare, leo id malesuada sollicitudin, leo augue convallis nisi, ut porta risus tortor eget urna. Morbi laoreet, eros a sodales blandit, nulla lacus tempor felis, ac fringilla odio enim vel arcu. Nullam pellentesque nisi eu turpis sollicitudin lacinia. Donec ac dui non mauris laoreet pharetra ac eget mauris.

Pellentesque tincidunt tortor id sagittis egestas. Donec tincidunt dolor vitae lacus faucibus, sit amet dignissim ligula convallis. Ut bibendum massa quis malesuada auctor. Phasellus semper, mi ut maximus vestibulum, lacus leo facilisis elit, non ornare ex elit et sem. Fusce a felis ante. Ut elementum tempor lobortis. Morbi interdum eleifend enim. Nam pellentesque diam sit amet justo pellentesque placerat. Donec gravida, lorem at ullamcorper egestas, lectus purus posuere lacus, eget tincidunt quam orci id nisl. Morbi eleifend pretium orci in pulvinar.

Aenean eleifend eget dolor aliquam mollis. Nam lorem turpis, condimentum at nibh eu, scelerisque placerat enim. Integer porttitor risus nisl, porttitor imperdiet elit congue nec. Cras semper est tortor, sed feugiat massa interdum vel. Ut urna enim, rutrum non sem vitae, vulputate elementum nibh. Pellentesque quis pharetra risus. Proin nec bibendum sapien. Maecenas mi erat, pulvinar blandit libero id, posuere malesuada mauris.
            </div>
            <div class="col-12 col-xl-6 bg-danger">
              Responsive Col 2
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt, est quis dapibus consequat, nisi dui semper tortor, ut aliquet risus ipsum in leo. Phasellus lectus quam, sodales at ultrices vel, dignissim tristique sapien. Quisque eget tortor suscipit neque pharetra hendrerit in luctus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at consequat neque. Mauris sit amet ante nibh. Integer lobortis purus ut tristique fringilla. Nullam eget justo ligula. Vivamus ornare lorem fringilla aliquet laoreet. Duis ultricies, metus et porta suscipit, nunc mauris vulputate mi, in placerat lectus massa a nulla. Proin vulputate convallis dolor ultrices porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur tempor viverra felis vitae pharetra. Praesent consequat nulla arcu, non scelerisque orci egestas at.

Nullam volutpat tortor a ante maximus elementum. Integer interdum lectus enim, eu tempus nisl eleifend at. Donec vitae ornare ipsum, vitae rutrum mauris. Vivamus ornare, leo id malesuada sollicitudin, leo augue convallis nisi, ut porta risus tortor eget urna. Morbi laoreet, eros a sodales blandit, nulla lacus tempor felis, ac fringilla odio enim vel arcu. Nullam pellentesque nisi eu turpis sollicitudin lacinia. Donec ac dui non mauris laoreet pharetra ac eget mauris.

Pellentesque tincidunt tortor id sagittis egestas. Donec tincidunt dolor vitae lacus faucibus, sit amet dignissim ligula convallis. Ut bibendum massa quis malesuada auctor. Phasellus semper, mi ut maximus vestibulum, lacus leo facilisis elit, non ornare ex elit et sem. Fusce a felis ante. Ut elementum tempor lobortis. Morbi interdum eleifend enim. Nam pellentesque diam sit amet justo pellentesque placerat. Donec gravida, lorem at ullamcorper egestas, lectus purus posuere lacus, eget tincidunt quam orci id nisl. Morbi eleifend pretium orci in pulvinar.

Aenean eleifend eget dolor aliquam mollis. Nam lorem turpis, condimentum at nibh eu, scelerisque placerat enim. Integer porttitor risus nisl, porttitor imperdiet elit congue nec. Cras semper est tortor, sed feugiat massa interdum vel. Ut urna enim, rutrum non sem vitae, vulputate elementum nibh. Pellentesque quis pharetra risus. Proin nec bibendum sapien. Maecenas mi erat, pulvinar blandit libero id, posuere malesuada mauris.
            </div>
          </div>
        </div>
      </div>

    </div>
</div>

uj5u.com熱心網友回復：

是的，這是可能的，您只需要為該元素添加特定的高度或最大高度，然后添加 overflow-y:auto; 例如：

 <div class="random_content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

 </div>

.random_content {
  background-color:red;
  width:400px;
  max-height:100px;
  overflow-y:auto;
}

JSfiddle 示例：https ://jsfiddle.net/zL86q1th/

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/344972.html

標籤：html css 推特引导弹性盒 bootstrap-5

上一篇：如何搜索表的第二列而不是第一列