我今天拿起了 Bootstrap 5
我無法制作 3 個堆疊的列布局，其中 box-1、box-2 和 box-3 在彼此的頂部需要 100vh
我已經粘貼了下面代碼的編輯版本，它實際上是三個堆疊在一起的盒子。我可以在 CSS Grid 和 Flexbox 中執行此操作，但不能使用 Bootstrap。
以下是我已經嘗試過但沒有奏效的方法：
- 將 body 和 html 設定為高度：100vh
- 將容器設定為 100vh - 這使得每個盒子 100vh 或 box-1 需要 100vh，box-2 溢位到另一個 100vh，同樣 box-3
- 圍繞正文內容創建一個包裝類并將其設定為高度 100vh
- 使用實用程式類 vh-100 重復 1)-3)
請問有什么建議嗎？
謝謝
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<section class="container box-1">
<div class="row">
<div class="col">
</div>
</div>
</section>
<section class="container box-2">
<div class="row">
<div class="col">
</div>
</section>
<section class="container box-3">
<div class="row">
<div class="col">
</div>
</div>
</section>
</body>uj5u.com熱心網友回復：
在我看來，您可以大大簡化此操作。如果每個容器只有一個，我不確定為什么你需要行或列。您似乎甚至不需要多個容器。根據檔案，讓我們只是一個基本的 flex 列。
/* all styles for demo only */
.d-flex {
background: #eee;
}
.box-1:nth-child(even) {
background: pink;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<div class="container d-flex flex-column vh-100 p-0">
<section class="box-1 flex-fill">Section</section>
<section class="box-1 flex-fill">Section</section>
<section class="box-1 flex-fill">Section</section>
</div>
</body>如果您碰巧需要容器和內部結構，只需將flex-fill類移到行中（并且只使用一個容器）。它會一樣作業。
/* all styles for demo only */
.row {
background: #eee;
}
.row:nth-child(even) {
background: pink;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<div class="container d-flex flex-column vh-100">
<div class="row flex-fill">
<div class="col">
<section class="box-1">Section</section>
</div>
</div>
<div class="row flex-fill">
<div class="col">
<section class="box-1">Section</section>
</div>
</div>
<div class="row flex-fill">
<div class="col">
<section class="box-1">Section</section>
</div>
</div>
</div>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/380542.html
標籤：html css 推特引导 弹性盒 bootstrap-5