Question

所以现在我的左侧是导航品牌的基本设置，右侧是链接。我想要的是将所有这些都集中在一起，并将Nav品牌放在链接之上。理想情况下，它看起来像这样

                                     Brand
                           link link link link link

我曾尝试按照它在bootsrtap上所说的内容，但也许它不起作用，因为现在是alpha6而我使用alpha3。

这是我的navbar.html.erb

<nav class="navbar navbar-dark">
 <div class="container">
    <button type="button" class="navbar-toggler hidden-lg-up"
      type="button"
      data-toggle="collapse"
      data-target="#nav-content">
       &#9776;
    </button>
       <a class='navbar-brand' href='/'>
          <span><%= image_tag("logo_white_background", :size => '30x30', :alt => "Test" ) %></span>
          <span class='light'>Test</span>
        </a>
    <div class="collapse navbar-toggleable-md" id="nav-content">
        <ul class="nav navbar-nav pull-xs-right">
            <li class="nav-item">
              <%= link_to 'Home', root_path, class: "nav-link #{yield(:blog_active)}" %>
            </li>
            <li class="nav-item">
              <%= link_to 'Test', tag_path("test"), class: "nav-link #{yield(:test_active)}" %>
            </li>
            <li class="nav-item">
              <%= link_to 'Test', tag_path("test"), class: "nav-link #{yield(:test_active)}" %>
            </li>
            <li class="nav-item">
              <%= link_to 'Test', tag_path("test"), class: "nav-link #{yield(:test_active)}" %>
            </li>
    </div>
</div>
</nav>

这是我的nabber.scss（不包括字体和颜色等内容

@media(max-width:61.9em) {
.navbar .navbar-brand {float:none;display:block;}
.navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
.navbar .navbar-nav {float:none !important;}
.nav-item{width:100%;text-align:left;}
}

Bootstrap 4 Center Navbar品牌和链接

0 个答案: