Fatal编程技术网

Twitter bootstrap 折叠时导航栏徽标向下移动

twitter-bootstrap twitter-bootstrap-3

Twitter bootstrap 折叠时导航栏徽标向下移动,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,当我折叠页面时，徽标图标向下移动。它包括收拢的导航栏菜单的第一个选项 是否要将徽标和折叠按钮放在同一行上 application.html.erb <!DOCTYPE html> <html> <head> <title>Gastro</title> <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track"

当我折叠页面时，徽标图标向下移动。它包括收拢的导航栏菜单的第一个选项

是否要将徽标和折叠按钮放在同一行上

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>

navbar品牌
需要进入
navbar标题
中，就像这样

  <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 brand
类具有宽度
100%
，因此请调整其大小，使其覆盖整个显示宽度。请尝试编辑该类以

.navbar-brand {
    width:80% !important;
}
请把这张照片写在帖子里，我写了。在屏幕截图旁边有一个链接…包括这个问题中的代码和图像。我不能这样做，因为我需要10%的声誉。这是我的第一个问题。谢谢你这么友好和否决。哦，对不起，我会为你添加它们。太棒了，这在崩溃中修复了它。非常感谢。现在我的问题是它没有倒塌。编辑：我会先试着弄清楚。没问题，请标记为答案，在下面添加另一条评论。如果你提出另一个问题，我会看看。耶！我想出来了。谢谢你的帮助！ 
<ul class="nav navbar-nav navbar-right">

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