Bootstrap 4 (альфа-6) бренда прибудете были сосредоточены и перекрывается с Toggler

Question

При использовании Navbar и контейнера в Bootrap 4 (альфа 6), как

<nav class="navbar navbar-static-top navbar-toggleable-md navbar-light bg-faded"> 

<div class="container"> 

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar-toggler-div" aria-controls="navbar-toggler-div" aria-expanded="false" aria-label="Navigation"> 
     <i class="fa fa-bars"></i> 
    </button> 

    <a class="navbar-brand" href="/"> 
     Band name here 
    </a> 

    <div class="collapse navbar-collapse" id="navbar-toggler-div"> 

     <ul class="navbar-nav"> 

      <li class="nav-item"> 
       <a class="nav-link" href="#">Foo</a> 
      </li> 

      <li class="nav-item"> 
       <a class="nav-link" href="#">Bar</a> 
      </li> 

     </ul> 

    </div> 

</div> 

и когда экран очень мал (например, на сотовые телефоны) бренд логотип/текст (не имеет значения) и Toggler * получить в центре * перекрываются (Toggler не рядом с брендом, но «на» это)

Это относится и к другим типам NavBar (фиксированная -top, default).

При удалении «контейнера» после элемента nav, все в порядке.

Мне нужен контейнер div для того, чтобы иметь навигационную панель с полной шириной, но которая сама «центрирована» (например, следующее содержимое).

Answer 1

У вас есть дополнительный контейнер <div class="container"> flexbox в вашем меню <nav>, которого не должно быть, и поэтому бутстрап пытается автоматически выровнять все элементы в центр. Удалите это div, и он работает.

Вот ваша скрипка обновляется с <div class="container"> удалены: https://jsfiddle.net/p47Lqb9f/1/

Answer 2

я мог бы "решить", добавив следующий CSS для контейнера

@media (max-width: 576px) { 
    nav .container { 
     width: 100%; 
    } 
} 

@Escher: The .container после нав также в официальном css BS 4, а также в их документации. Поэтому я считаю, что это предназначено.