Bootstrap 4 рухнул navbar теряет навигационную марку

Question

Я пытаюсь создать навигационную панель Bootstrap 4, которая сохраняет навигационную марку без ее исчезновения при рушится.

Вот мой код:

<nav class="navbar navbar-light bg-faded"> 
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"> 
    &#9776; 
    </button> 
    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> 
    <a class="navbar-brand" href="#">Responsive navbar</a> 
    <ul class="nav navbar-nav"> 
     <li class="nav-item active"> 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Features</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Pricing</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">About</a> 
     </li> 
    </ul> 
    </div> 
</nav> 

Так просто быть ясно, что нав-элементы и NavBar бренд исчезают, когда Navbar свернут, и я хотел бы, чтобы Navbar-бренд будет видно.

Единственный CSS, о котором я могу думать, это использовать дисплей, но это не имеет никакого эффекта.

Спасибо за любой совет!

Answer 1

Вы должны изменить HTML-разметку и убедиться, что .nav-brand находится за пределами <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">:

<nav class="navbar navbar-light bg-faded"> 
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"> 
    &#9776; 
    </button> 
    <a class="navbar-brand" href="#">Responsive navbar</a> 
    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> 
    .... 

Теперь ваш Navbar должен выглядеть так, как показано на следующем рисунке в небольших видовых:

Вы также можете добавить класс pull-xs-right к кнопке «гамбургер»:

Затем он должен выглядеть, как показано ниже:

При нажатии кнопки, первая ссылка все еще плавает рядом с .nav-brand:

Используйте следующий код SCSS для удаления float-left из .nav-brand для получения дополнительной малой видовой карты:

.navbar { 
    @include media-breakpoint-down(xs) { 
    .navbar-brand { 
     float: none; 
    } 
    } 
} 

Код SCSS выше компилируется в код CSS следующим образом:

@media (max-width: 543px) { 
    .navbar .navbar-brand { 
    float: none; 
    } 
} 

Более подробную информацию о реагирующих NavBars Bootstrap 4 также можно найти по адресу: http://bassjobsen.weblogs.fm/bootstrap-4s-responsive-navbars/