[bootstrap]Bootstrap 5 Offcanvas 改變寬度

參考網址: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; 

 

本篇發表於 程式設計。將永久鏈結加入書籤。