我有一個引導模式，主體中有兩列。
我希望每列單獨滾動（主從布局）。
body, html { font-size: 10px }<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Header</div>
<div class="modal-body">
<div class="row">
<div class="col overflow-auto">Col1 This might be long</div>
<div class="col overflow-auto">Col2 This must be scrolled separately</div>
</div>
</div>
<div class="modal-footer">Footer</div>
</div>
</div>uj5u.com熱心網友回復：
您必須修改 Bootstrap 默認設定。
首先，您需要將類.modal-dialog上模態的高度固定為 100%，沒有 1.75rem 的兩個邊距（頂部/底部）。
然后，您必須將.modal-content,.row和.col設定為 100% 高度以使其在您的 div 中溢位。
通過將其設定在.modal-content它上面將停止頁面上的溢位。剩下的就是激活溢位：自動，如果你沒有在容器上指定任何高度，它就不會溢位。
最后你設定你overflow-y:hidden的.modal-body
所以它應該使用下面的CSS：
.modal-dialog{
height:calc(100% - 3.5rem);
}
.modal-content, .modal-body > .row, .modal-body > .row > div.col{
height: 100%;
}
.modal-body{
overflow-y:hidden;
}
演示
body, html { font-size: 10px }
.modal-dialog{
height:calc(100% - 3.5rem);
}
/* ADDED H-100 instead */
/*.modal-content, .modal-body > .row, .modal-body > .row > div.col{
height: 100%;
}*/
.modal-body{
overflow-y:hidden;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content h-100">
<div class="modal-header">Header</div>
<div class="modal-body">
<div class="row h-100">
<div class="col overflow-auto h-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices ultrices erat et auctor. In hac habitasse platea dictumst. Phasellus et rutrum magna. Fusce malesuada feugiat lorem, at aliquam ex convallis vitae. Praesent viverra rhoncus faucibus. Nullam justo enim, congue congue augue venenatis, pellentesque sagittis nisi. Mauris sed luctus quam. In vulputate sed ligula pretium hendrerit. Sed pellentesque, risus in ullamcorper luctus, diam dolor varius ipsum, a tincidunt dolor mi vitae nisl. Integer sed massa a urna mollis cursus.
Praesent mollis magna vitae neque laoreet commodo. Morbi mollis tortor eu posuere maximus. Sed gravida convallis velit, volutpat posuere diam pellentesque ut. Morbi rhoncus congue nunc. Vestibulum dictum scelerisque magna elementum ullamcorper. Morbi vitae nulla lorem. Aliquam suscipit accumsan nulla id laoreet. Suspendisse potenti. Integer convallis odio tortor, non sollicitudin purus vestibulum in. Suspendisse laoreet semper dui. Nunc non nibh tincidunt, imperdiet lacus mollis, venenatis libero. Vivamus pretium et nisi sit amet tempus. Curabitur sodales aliquet condimentum.
Aliquam tincidunt tincidunt enim, vitae rhoncus eros tempor id. Ut porta feugiat tellus ut vulputate. Sed pharetra finibus tortor eu dapibus. Nulla ac scelerisque ipsum. Donec ultricies suscipit neque eu venenatis. Maecenas id placerat libero. Aliquam mattis commodo quam, quis suscipit sapien ullamcorper sagittis. Etiam sem arcu, dictum at ornare quis, pulvinar ut enim. Sed pretium nisl vitae maximus porta. Duis eleifend auctor mauris vitae tempor. Integer hendrerit gravida risus, in tincidunt nibh placerat et. Praesent sit amet justo diam. Nam non suscipit nisi. Cras congue, erat a malesuada luctus, sapien sem elementum eros, ut mattis urna quam posuere nunc. Aenean aliquet augue id dui consequat condimentum.</div>
<div class="col overflow-auto h-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum urna nibh, pretium vitae nisi id, pulvinar eleifend massa. Phasellus fringilla et ante et fermentum. Pellentesque ex arcu, sodales id massa quis, porta placerat magna. Etiam maximus felis massa, quis euismod erat sollicitudin et. Sed vulputate sapien quis magna sagittis placerat. Donec ullamcorper interdum nulla non suscipit. Etiam vehicula libero in sem mattis sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse blandit mollis est, sit amet dapibus nisl imperdiet nec. Fusce quis tortor massa. Nam tempor aliquam auctor. Suspendisse lacinia feugiat ornare. Integer bibendum sodales mauris, id iaculis quam.
Cras accumsan accumsan orci, ac molestie velit. Aenean eu facilisis mi. Quisque et nulla enim. Vestibulum tincidunt mauris ac turpis rutrum pretium. In sagittis velit nisi, a sollicitudin massa ultrices id. Integer at felis elit. Duis mi libero, facilisis suscipit turpis sed, scelerisque consequat nisi. Cras leo dui, efficitur nec iaculis ac, dictum nec nibh. Morbi sed eros purus. Curabitur ultrices euismod ex non sagittis. Duis tincidunt dui ac ante maximus, et eleifend orci euismod.
Pellentesque quis massa nisi. Morbi at diam vel magna imperdiet tristique. Mauris in elementum justo, nec cursus ligula. Duis laoreet vestibulum ex in malesuada. Mauris in nulla efficitur, maximus libero quis, facilisis tellus. Integer faucibus leo et dolor semper ultrices. Maecenas eu imperdiet erat. Vivamus venenatis malesuada nunc eu ultricies. Etiam ornare maximus sollicitudin. Vestibulum faucibus, purus at vestibulum consequat, massa felis scelerisque sapien, vel tempor ex nisi eu ipsum. Etiam vitae massa bibendum, luctus massa in, pellentesque nunc. Aliquam ac purus ut purus scelerisque euismod. Curabitur ultrices eros a eros aliquam pellentesque. Sed bibendum quam ac eros semper, ut ornare elit imperdiet. Nulla facilisi. Phasellus finibus venenatis ipsum, nec viverra quam maximus tempus.
Etiam a viverra sapien. Donec risus metus, egestas quis justo ut, tincidunt lobortis erat. Nulla facilisi. Nunc volutpat, eros et condimentum porttitor, ligula ante blandit mauris, vel vulputate tortor orci at mi. Nam pretium in risus nec placerat. Nunc efficitur vitae quam quis maximus. Vivamus eu justo sit amet mi maximus semper vitae at leo. Fusce gravida ultricies lacinia. Curabitur laoreet sagittis quam in porttitor. Donec at neque ac est fermentum placerat. Fusce consequat sapien nec nunc porta, rutrum blandit ipsum sodales. Nulla egestas blandit metus nec molestie. Nunc facilisis justo massa, vitae aliquet libero mollis sit amet. Donec placerat sollicitudin metus, sit amet eleifend tortor accumsan nec. Phasellus velit ipsum, venenatis eget convallis sit amet, rutrum vitae mauris.
Fusce at faucibus erat. Quisque ex ligula, volutpat id nisi eget, tristique aliquam sapien. In posuere, arcu eget cursus dictum, magna turpis bibendum ipsum, sed fringilla mi tortor ut libero. Vivamus venenatis molestie lorem dignissim gravida. Fusce bibendum aliquam neque eu aliquet. Etiam volutpat rutrum dolor, id ultricies eros. In vel commodo risus, at pretium orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>
</div>
</div>
<div class="modal-footer">Footer</div>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/339176.html
標籤：css 推特引导 引导模式 bootstrap-5
上一篇：如何在引導程式5中將卡片居中