參考網址:https://www.geeksforgeeks.org/bootstrap-5-offcanvas-sass/
bootstrap Offcanvas 預設寬度是400px,要改變寬度,似乎得從SASS下手
.offcanvas {
position: fixed;
bottom: 0;
z-index: var(--bs-offcanvas-zindex);
display: flex;
flex-direction: column;
max-width: 100%;
color: var(--bs-offcanvas-color);
visibility: hidden;
background-color: var(--bs-offcanvas-bg);
background-clip: padding-box;
outline: 0;
transition: transform 2s ease-in-out;
}
.offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {
--bs-offcanvas-zindex: 1045;
--bs-offcanvas-width: 400px;
--bs-offcanvas-height: 30vh;
--bs-offcanvas-padding-x: 1rem;
--bs-offcanvas-padding-y: 1rem;
--bs-offcanvas-color: white;
--bs-offcanvas-bg: green;
--bs-offcanvas-border-width: 1px;
--bs-offcanvas-border-color: var(--bs-border-color-translucent);
--bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.offcanvas-title {
margin-bottom: 0;
line-height: 4;
}
上方將要改變的參數加入var()
下方再改變值
例如:
上方 width: var(--bs-offcanvas-width);
下方--bs-offcanvas-width: 200px;