ブートストラップnavbarは垂直でない水平を表示します

Question

同様の問題を抱えるスレッドは数多くありますが、そこで解決策を試してみることは助けになりませんでした。したがって、問題は、navbarがアイテムを水平方向に垂直に表示しないことです。宝石 'ブートストラップ'、 '〜> 4.0.0.alpha3'

_navbar.scss

.navbar { 
border-radius:0; 
margin-bottom: 20px; 
.navbar-brand { 
    font-weight: bolder; 
    .light { 
     font-weight: 300; 
    } 
} 
.navbar-toggler { 
    outline: none; 

} 
} 

.collapse-bg { 
padding: 0 !important; 
.card { 
    margin-bottom: 0; 
    border-radius: 0; 
    border: none; 
} 
} 

.collapse-bg .card .list-group-item { 
padding: 0; 
border-radius: 0 !important; 
border-color: black; 
a { 
    backgroud-color: #1a1a1a; 
    color: #bdc3c7; 
    width: 100%; 
    height: 100%; 
    padding: 10px; 
    &:active { 
     color:white; 
     border-bottom: none; 
    } 
} 
} 

_navbar.html.erb

<div class="collapse" id="exCollapsingNavbar"> 
<div class="collapse-bg p-a-1"> 
    <div class='card'> 
     <ul class="list-group list-group-flush"> 
      <li class="list-group-item"> 
       <%= link_to 'Blog', root_path, class: "nav-link #{yield(:blog_active)}" %> 
      </li> 
      <li class="list-group-item"> 
       <%= link_to 'About', about_path, class: "nav-link #{yield(:about_active)}" %> 
      </li> 
      <li class="list-group-item"> 
       <%= link_to 'Contact', contact_path, class: "nav-link #{yield(:contact_active)}" %> 
      </li> 
     </ul> 
    </div> 
</div> 
</div> 
<nav class="navbar navbar-light bg-faded"> 
<div class="container"> 
    <a class='navbar-brand' href="#"> 
     Travel<span class='light'>blog</span> 
    </a> 
    <button class="navbar-toggler hidden-sm-up pull-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar"> 
     &#9776; 
    </button> 
    <ul class="navbar-nav"> 
     <li class="nav-item"> 
      <%= link_to 'Blog', root_path, class: "nav-link #{yield(:blog_active)}" %> 
     </li> 
     <li class="nav-item"> 
      <%= link_to 'About', about_path, class: "nav-link #{yield(:about_active)}" %> 
     </li> 
     <li class="nav-item"> 
      <%= link_to 'Contact', contact_path, class: "nav-link #{yield(:contact_active)}" %> 
     </li> 
    </ul> 
</div> 

Answer 1

使用

bootstrap4 alpha6は完全にベーキングされたフロートです。詳しくはhttps://v4-alpha.getbootstrap.com/utilities/flexbox/を参照してください。