這是嘗試創建一種我過去創建的 div 型別，但使用具有最少非引導 css 的自定義樣式表。它還沒有完全到位，但我正在嘗試將我寫入 django 靜態檔案 CSS 的每個樣式規則轉換為引導程式類。我被困在基于視口的大小調整上。
在我發現這些檔案之前的狀態是這樣的，高度擬合內容如您所料：
我在 Bootstrap 5 中發現了這一點
我將我的班級設定為“vh-100”，這非常酷，將 div 設定為占據視口的整個垂直高度。
但是等等，它與整個視口的高度相匹配，而不是在計算出導航欄和填充后的其余部分。不過有道理。
Awesome! just need to shave a little off that so it actually fits in the actual viewport and we have the desired end state.
Looking in bootstrap documentation you can usually specify 25%, 50%,75%, or 100% like we did here. Well, it doesn't talk about that for viewport-based sizing, but it does in a lot of bootstrap stuff, so I'd guess it'd be the same here. So I give that a go. 75% Viewport should be just right to give it a little bottom area.
So now "vh-50" or "vh-75"
Okay, weird- Viewport must be 100 or it falls back to sizing based on content. No other examples of any other values for viewport based sizing are visible in docs, and I couldn't locate any in the wild.
Just in case, here's the html for that div (part of a jinja content block in a django app)
{% block content %}
<div class="body-area bg-dark text-light my-5 vh-75">
<div class="container">
<div class="row">
Hi
</div>
</div>
</div>
{% endblock %}.body-area {
margin-left: auto;
margin-right: auto;
width: 75%;
border: 10px solid #000000;
border-radius: 15px;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}雖然我開始認為我可能不應該打擾，并且可能不會在這個特定的應用程式中，但我認為能夠根據視口的百分比來調整大小真的很有用，尤其是對于移動設備應用程式。
那么我是不是完全錯了呢？除了 100 的視口外，我不應該調整任何大小嗎？我應該如何解決這個問題，無論是使用我正在嘗試的引導工具還是我目前不知道的最佳實踐？
我希望那里的任何 CSS/bootstrap 向導都知道一個技巧，我希望這對我和將來遇到此問題的其他人都有幫助。
uj5u.com熱心網友回復：
您不應該手動設定高度。您應該使用flexbox 網格通過適當的對齊類自動完成它。
- 使用 class 在導航欄和內容元素周圍放置一個 flex 列
vh-100。這可以只是 body 元素。 - 將類
flex-fill放在內容元素上，使其伸展以填充剩余空間。
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body class="d-flex flex-column vh-100">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- ... -->
</div>
</div>
</nav>
<div class="body-area container-fluid bg-dark text-light flex-fill">
<div class="row">
<div class="col">
Hi
</div>
</div>
</div>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/360340.html
標籤：html css 推特引导 django-模板 bootstrap-5