Question

有许多线程有类似的问题，但尝试解决方案并没有帮助我。所以问题是导航栏垂直显示的项目不是水平的。

使用gem＆＃39; bootstrap＆＃39;，＆＃39;〜＆gt; 4.0.0.alpha3＆＃39;

_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/。

Bootstrap导航栏显示垂直而不是水平

1 个答案: