Странное поведение в меню начальной загрузки

Question

У меня есть меню, как это (самонастройки 4 альфа 2):

Но есть странная вещь, где она становится этим:

Для воспроизведения:

1. Сделать ширину обозревателя небольшим ,
2. Раскройте меню
3. свернуть меню
4. сделать ширину браузера большой снова, вуаля.

Это меню:

<div class="menu-root"> 
     <div class="container"> 

      <div id="menu" class="col-xs-12 col-md-6 col-lg-4"> 

       <nav class="navbar navbar-dark bg-inverse" style="background: transparent"> 

        <button class="navbar-toggler hidden-md-up collapsed" type="button" data-toggle="collapse" data-target="#collapsingNavbar" aria-expanded="false"> 
         <span class="so_menu_name">The Protagonist</span> 
        </button> 

        <div class="navbar-toggleable-sm collapse" id="collapsingNavbar"> 

         <ul class="nav navbar-nav os_menu"> 

          <li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/watch-the-trailer/">Watch the Trailer</a></li> 
          <li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/screenings-events/">Screenings &amp; Events</a> 
          </li><li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/synopsis/">Synopsis</a></li> 
          <li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/the-protagonist/">The Protagonist</a></li> 
          <li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/the-filmmakers/">The Filmmakers</a></li> 
          <li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/contact-credits/">Contact &amp; Credits</a></li> 
          <li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/press/">Press</a></li> 
          <li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/support-our-crowdfunding-campaign/">Support our Crowdfunding</a></li> 

         </ul> 

        </div> 

       </nav> 

      </div> 
     </div> 

    </div> 


html, body { 
    height: 100%; 
    width: 100%; 
    margin:0; 
} 

body { 
    background-color: black !important; 
} 

* { 
    color: white; 
} 

#menu { 
    padding-top: 20px; 
} 


.nav.navbar-nav .nav-item { 
    float: none; 
} 
.nav.navbar-nav .nav-item+.nav-item { 
    margin-left: 0; 
} 
.nav.navbar-nav .nav-link { 
    padding: .25rem 0; 
} 

.navbar { 
    border-top: 2px solid white; 
    border-bottom: 2px solid white; 
} 

#menu button{ 
    display: block; 
} 

#menu hr { 
    /*box-sizing: border-box;*/ 
    margin-left: -16px; 
    margin-right: -16px; 
    color: white; 
    border-color: white; 
    background-color: white; 
    border: 0 none; 
    height: 2px; 
} 

#menu * { 
    font-family: sans-serif; 
    color: white; 
    font-size: 14px; 
    letter-spacing: 1px; 
    line-height: 18px; 
} 

a { 
    color: rgb(255,236,189); 
} 

a:hover { 
    color: rgb(255,236,189); 
} 


textarea:focus, input:focus{ 
    outline: none; 
} 
button:focus { 
    outline:0; 
} 

.menu-root { 
    z-index: 50; 
} 

Для удобства: https://jsfiddle.net/clankill3r/efzsubtr/

Answer 1

JS в Bootstrap устанавливает модель коробочную <nav> с классом .navbar на высоту 0.

Однако внутренний <ul> сохраняет правильную высоту. Рассмотрим стиль <ul> с классом os_menu.

Также ...

Как TWBS4 в ALPHA любые рекомендации, чтобы исправить здесь, скорее всего, приведет к изменению поведения позже на выпуске.

Моя рекомендация представить выпуск авторам Bootstrap на https://github.com/twbs/bootstrap/issues