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>

BS重叠列内容

1 个答案: