-1
有許多線程有類似的問題,但嘗試解決方案沒有幫助我。所以問題是導航欄垂直顯示項目不是水平的。自舉導航欄顯示垂直不水平
使用寶石 '自舉', '〜> 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">
☰
</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>
你可以升級到4.0.0.alpha6嗎? – ZimSystem
當我開始時它是4.0.0.alpha6,但由於我無法工作,它降級到alpha3。 – Kuulme