부트 스트랩 navbar가 수직이 아닌 가로로 표시됩니다.

Question

비슷한 문제가 많은 스레드가 있지만 거기에 해결책을 시도해도 도움이되지 못했습니다. 따라서 문제는 탐색 표시 줄이 항목을 가로로 표시하지 않는다는 것입니다.

보석 '부트 스트랩'을 사용하여 '~> 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 완전히 float을 구운 것입니다. 자세한 내용은 https://v4-alpha.getbootstrap.com/utilities/flexbox/을 참조하십시오.