Bootstrap развернуть на LG с заданной высотой не удается на маленьких экранах - PullRequest
Новая
       26

Bootstrap развернуть на LG с заданной высотой не удается на маленьких экранах

0 голосов
/ 28 марта 2020

У меня есть bootstrap 4 navbar, который настроен на расширение lg и падение на небольших устройствах. Это работает на высоте панели навигации по умолчанию, но всякий раз, когда я устанавливаю панель навигации на высоту, меньшую высоты по умолчанию, расширение для небольших устройств не работает ...

HTML -Code: 

<header style="background-color: blue;color: white;font-size: 14px">
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-default" style="height:30px">
           <ul class="navbar-nav mr-auto flex-row justify-content-start">
             <li class="nav-item">
                <a href="#" class="mr-4">
                   <i class="fa fa-twitter-square fa-lg"></i>
                </a>
             </li>
           </ul>

           <a class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
               aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
               <i class="fa fa-road"></i>
           </a>
           <div class="collapse navbar-collapse" id="navbarText">
              <ul class="navbar-nav ml-auto d-flex">
                 <li class="nav-item active d-inline">
                    <a class="nav-link" href="#">Home1 <span class="sr-only">(current)</span></a>
                 </li>
                 <li class="nav-item active d-inline">
                    <a class="nav-link" href="#">Home2 <span class="sr-only">(current)</span></a>
                 </li>
                </ul>
            </div>
        </nav>
    </div>
</header>

Содержание также не установлено посередине. Что я упускаю? Выше показано следующее. Даже при развертывании происходит сбой

enter image description here

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

Ответы [ 2 ]

1 голос
/ 28 марта 2020

На самом деле Bootstrap высота панели навигации не определяется свойством CSS height, но изменяется с заполнением <a> и их содержимым.

Попробуйте добавить py-0 CSS класс на <a> вашей панели навигации для удаления верхнего и нижнего отступов.

См. этот пример: https://codepen.io/navalex/pen/jOPXxor

0 голосов
/ 28 марта 2020

Установка высоты 30px вызывает вашу проблему: 

<nav class="navbar navbar-expand-lg navbar-default" style="height:30px">

Вот кодовая ручка, которая показывает ваш код в стандартном шаблоне boostrap4 с этим закомментированным стилем:

codepen

...