[英]Bootstrap navbar displaying vertical not horizontal
There are many threads with a similar problem, but trying the solutions there has not helped me.有很多线程有类似的问题,但尝试那里的解决方案并没有帮助我。 So the problem is that the navbar displays items vertically not horizontally.
所以问题是导航栏垂直而不是水平显示项目。
Using gem 'bootstrap', '~> 4.0.0.alpha3'使用 gem 'bootstrap', '~> 4.0.0.alpha3'
_navbar.scss _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 _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>
bootstrap4 alpha6 已完全烘焙浮点数,请参阅https://v4-alpha.getbootstrap.com/utilities/flexbox/了解更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.