BS Перекрывающееся содержимое столбца

Question

В приведенном ниже коде я учусь создавать 2 столбца, в которых левый столбец используется в качестве прокручиваемой панели навигации.Я все еще на нулевой стадии, поэтому извините за качество!

Я столкнулся с проблемой при установке класса .sidebar на "position:fixed" в левом столбце.Проблема заключается в том, что содержимое левого столбца перекрывает содержимое правого столбца при использовании этого позиционирования.

Если я изменю размер столбца сетки, скажем, "col" вместо "col-sm-2" проблема перекрытияушел, но я получаю большой разрыв между содержимым слева и правым.

I должен использовать "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>