BS重疊列內容

Question

在下面的代碼中，我正在學習如何使用左列作為可滾動導航欄創建2列。 我這里仍然處於零階段，請原諒質量！

我在左側欄中將.sidebar類設置為"position:fixed"時遇到問題。 問題是，使用此定位時，左列的內容與右列的內容重疊。

如果我將網格列的大小更改為"col"而不是"col-sm-2"則重疊問題消失了，但是左側和右側的內容之間有很大的差距。

我必須使用"position:fixed" ，有沒有辦法防止這種重疊？ 謝謝。

https://jsfiddle.net/ekareem/aq9Laaew/247932/

Answer 1

添加col-auto類和一個遮罩容器以容納導航的寬度和高度，請查看下面的工作片段，希望對您有所幫助：）

 .row { background: #f8f9fa; margin-top: 20px; } .col { border: solid 1px #6c757d; padding: 10px; } #REF0001>li>a { color: white; } .nav-mask, #sidebar { min-width: 250px; max-width: 250px; height: 40vh; } #sidebar { background: #7386D5; z-index: 999; color: #fff; transition: all 0.3s; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); overflow-y: scroll; position: fixed; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col col-auto"> <ul id="sidebar" class="list-unstyled"> <a href="#REF0001" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle" onclick=" $('#PM0001').toggleClass('fa-minus-square fa-plus-square')"> <i class="fas fa fa-plus-square" id="PM0001"></i> Parent-01 </a> <ul class="list-unstyled" id="REF0001"> <li> <a href="#">Home 1</a> </li> <li> <a href="#">Home 2</a> </li> <li> <a href="#">Home 3</a> </li> </ul> <li>A</li> <li>B</li> </ul> <div class="nav-mask"></div> </div> <div class="col"> 2 of 2 </div> </div> </div>