6
我正在嘗試使用Bootstrap 4創建類似於屏幕截圖的佈局,但我在使邊欄固定並同時實現此佈局時遇到了一些問題。
有一個基本的例子展望:
<div class="container">
<div class="row">
<div class="col-m-4" id="sticky-sidebar">
Sidebar
</div>
<div class="col-m-8" id="main">
Main Area
</div>
</div>
</div
這有可能讓這個佈局,但事情變得棘手一次我宣佈:
.sidebar {
position: fixed // or absolute
}
一旦我讓側邊欄粘,該主要 DIV開始出現後面的側邊欄而不是旁邊。當然,可以聲明一些保證金並將其恢復到原來的位置,但它使響應性變得複雜。
我覺得我錯過了一些東西,我讀了Bootstrap 4文檔,但我找不到一個簡單的方法來實現這種佈局。
如果你添加一些Lorem存有你的側邊欄的內容,你可以看到,我最初的問題在得到這個片段重建。因爲我們宣佈了一個固定的位置,側欄停止尊重網格系統。 – cinnaroll45
我編輯了一個添加了'max-width:20%'的代碼到側邊欄 – GvM
是的,聲明最大寬度爲容器可以解決問題。謝謝! – cinnaroll45