Question

折叠页面时，徽标图标会向下移动。它涵盖了折叠导航栏菜单的第一个选项。

是否有将徽标和折叠按钮放在同一条线上？

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Gastro</title>
    <%= stylesheet_link_tag "application", media: "all",
    "data-turbolinks-track" => true %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <div class="row">
      <div class="navbar navbar-static-top navbar-inverse">
        <div class="container">
           <div class="navbar-header">
         <button class = "navbar-toggle" data-toggle = "collapse"
            data-target = ".navbar-collapse">
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
         </button>
         </div>
         <a class="navbar-brand logo-nav"> 
            <%= link_to image_tag('nblogo.jpg'),   '#', id: "logo" %> 
          </a>

          <div class = "navbar-collapse collapse ">

            <ul class="nav navbar-nav pull-right">
              <li>
                <%= link_to "Home",      '#' %>
              </li>
              <li>
                <%= link_to "Menu",      '#' %>
              </li>
              <li>
                <%= link_to "About",     '#' %>
              </li>
              <li>
                <%= link_to "VIP",       '#' %>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
    <!-- My Carousel
    ============================================================= -->


  <%= yield %>

</html>

custom.css.scss

@import "bootstrap";

.nav {
  margin-top: -55px;
  width: auto;
}

#logo {
  height: auto;
}

.navbar .brand {
    max-height: 40px;
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0;
}

Answer 1

navbar-brand需要进入navbar-header，如此......

  <div class="navbar-header">
     <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
     </button>
     <a class="navbar-brand logo-nav">Logo</a>
  </div>

此外，您应在navbar-right上使用pull-right代替navbar-nav。除非您希望在折叠时将链接推到右侧。

<ul class="nav navbar-nav navbar-right">

Answer 2

默认情况下，

navbar-brand类的宽度为100%，因此在调整大小时，它会覆盖整个显示宽度。尝试编辑此课程

.navbar-brand {
    width:80% !important;
}

崩溃后，navbar徽标会向下移动

2 个答案: