Создание начальной загрузки 4 правой стороны панели навигации по высоте до 100% - PullRequest
Новая
       25

Создание начальной загрузки 4 правой стороны панели навигации по высоте до 100%

0 голосов
/ 27 мая 2018

Ниже приведен мой код панели навигации Bootstrap 4, в котором я пытаюсь создать полную правую высоту панели навигации до 100%. 

<nav class="navbar navbar-expand-sm bg-light navbar-light"
            style="width: 200px; float: right;">
  <ul class="nav flex-column">
    <li class="nav-item active">
      <a class="nav-link" href="#">Sports</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Facebook</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Youtube</a>
    </li>
  </ul>
</nav>

Я также пытался height: 100%;, navbar-full до<nav> но это больше не действует.

см. Изображение:

enter image description here

Любая помощь будет по достоинству оценена!

1 Ответ

0 голосов
/ 27 мая 2018

Я бы, вероятно, не полагался на встроенный компонент Navbar Bootstrap для этого, потому что он действительно разработан вокруг горизонтальной структуры макета, и вы собираетесь потратить много ненужного времени на написание CSS для его переопределения или применение дополнительных объявлений класса кпереопределите это поведение.

Если вы пропустите этот компонент, вы сможете достичь очень похожих результатов с минимальными усилиями: 

.navbar-right {
  height: 100vh;
  right: 0;
  position: absolute;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<nav class="navbar-right bg-light p-3">
  <ul class="nav flex-column">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
  </ul>
</nav>

position:absolute вытаскивает навигацию из обычного потока документов, позволяя расположить ее везде, где (right:0 перемещает ее вправо от окна браузера).height установлен на 100vh, что составляет 100% от высоты области просмотра.

Теперь это довольно простой пример.Вы, вероятно, захотите применить определенную ширину, особенно с учетом ключевых точек останова.Но это должно привести вас на правильный путь.

...