css - 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>