我在這里創建了這個問題：
使用 Flex CSS 和 Bootstrap 進行回應式布局，來自另一個有很好答案的問題。
現在根據選擇的答案，我看到了這個（解決方案 2）：
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column flex-sm-wrap vh-100 vw-100 py-2 bg-light">
<div class="order-sm-1 order-2 col-sm-8 col-12 h-100 bg-warning">Content</div>
<div class="order-sm-2 order-1 col-sm-4 col-12 h-25 bg-secondary">Sidebar Top</div>
<div class="order-sm-3 order-3 col-sm-4 col-12 h-25 bg-info">Sidebar bottom</div>
</div>
我需要一些額外的作業才能得到我需要的完全正確的東西。上面的代碼片段確實按預期作業，但我希望側邊欄頂部和底部的默認寬度為330px. 這兩個列布局出現的區域的全寬是1400px左右。內容應保留其余空間并隨著頁面縮小而縮小，直到內容部分400px在拆分為單列布局之前達到大約。
這是怎么做的？
我一直在嘗試使用各種寬度和最小和最大寬度，但仍然沒有更接近。
uj5u.com熱心網友回復：
干得好...
您可能沒有添加!important以覆寫 Bootstrap。
請參閱下面的片段。
#top,
#bottom {
width: 330px !important;
}<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv l9liuYLaMQ/' crossorigin='anonymous'></script>
</head>
<body>
<div class='d-flex flex-column flex-sm-wrap vh-100 vw-100 py-2 bg-light'>
<div class='order-sm-2 order-1 col-sm-4 col-12 h-25 bg-secondary' id='top'>Sidebar Top</div>
<div class='order-sm-1 order-2 col-sm-8 col-12 h-100 bg-warning'>Content</div>
<div class='order-sm-3 order-3 col-sm-4 col-12 h-25 bg-info' id='bottom'>Sidebar bottom</div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/400165.html
標籤：html css 推特引导 弹性盒 bootstrap-5