最小化屏幕宽度时，导航栏覆盖不会保持在一行中

Question

我的导航栏有问题！我希望我的导航栏在页面最小化时保持其大小。当我减小浏览器窗口的宽度时，导航栏会彼此下方。

之前浏览器窗口宽度减小

在浏览器窗口宽度减小之后

导航栏代码：

<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top" style="">

  <div class="container">
  <div class="row" style="">
  <ul class="nav navbar-nav navbar-right", style="">


   <li class="dropdown" style="">

                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Students<span class="caret"></span>
                     </a>

                     <ul class="dropdown-menu">
                       <li><%= link_to "Life", "/boards/1" %></li>
                       <li><%= link_to "Admissions", "/boards/2" %></li>
                       <li><%= link_to "Advice", "/boards/3" %></li>
                     </ul>
                  </li>

                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Business<span class="caret"></span>
                    </a>

                    <ul class="dropdown-menu">           
                      <li><%= link_to "Culture", "/boards/4" %></li>
                      <li><%= link_to "Invest", "/boards/5" %></li>
                      <li><%= link_to "Advice", "/boards/6" %></li>
                    </ul>
                  </li>

<% if(!user_signed_in?) %>
       <li> <%= link_to "Log In", new_user_session_path %> </li>
       <li> <%= link_to "Sign Up", new_user_registration_path %> </li>
       <% else %>

       <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><%= current_user.username %> <span class="caret"></span>
        </a>

        <ul class="dropdown-menu">
          <li><%= link_to "My Profile", user_path(current_user) %></li>
           <li><a href="/your_essays">My Essays</a></li>
          <li><a href="/your_reservations">Requests</a></li>
          
          <li role="separator" class="divider"></li>
          <li><%= link_to "Edit Profile", edit_user_registration_path %></li>
          <li><%= link_to "log out", destroy_user_session_path, method: :delete %></li>
        </ul>

        <li class="thumbnail2"><%= image_tag(current_user.avatar.url(:thumb), :id => "image-tag", class: "portrait") %></li>
      </li>
      <% end %>
      <!--  this is where it's different-->

            <% if user_signed_in? %>
              <li>
                <a href="/conversations"><span class="label label-danger"><%=unread_messages_count%></span><i class="fa fa-envelope-o" aria-hidden="true"></i> Messages</a>
              </li>
             <!--  <li>
                <%= link_to 'Messages', conversations_path %>
              </li> -->
              <li>
                
              </li>
              <li>
                <a href="/revisers"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Become a Reviser</a>
              </li>
            <% else %>
            <% end %>
           
    </ul>
  <script>
    $(document).ready(function () {
        $('.dropdown-toggle').dropdown();
    });
</script>
    <div class="navbar-header" style="">
      <%= link_to "EssayFriends", root_path, class: "navbar-brand" %>
    </div>

<div style="width:360px;max-width:360px;margin-left:200px;top: 50%;transform: translateY(12%);">
   <%= render 'users/school_search' %>  
</div>
  

   </div>
  
</div><!--/.container-fluid -->

</nav>

.textbox-search {
  height:40px;
  width: 20rem;
  font-size: 18px;
  
}

.dropdown:hover .dropdown-menu {
    display: block;
}


.container {
    width: 95%;
}

.navbar {
  margin-bottom: 0px;
}




.alert {
  margin-bottom: 0px;
}

.navbar-default {
    background-color: #45d1b8;
    border-color: #45d1b8;
}

.navbar-default .navbar-brand {
    color: #FFF;
    font-size: 2em;
    font-weight: 400;
}
.navbar-default .navbar-links {
    color: #FFF;
    font-weight: 400;
    font-family:Helvetica;
}
.navbar-default .navbar-nav > li > a {
    color: #FFF;
}

有人可以帮我弄清楚为什么我的导航栏会这样做并修复吗？谢谢！！！我希望导航栏缩小而不显示，除非你像 stackoverflow 导航栏一样滚动！！！谢谢！！

Answer 1

您似乎需要一些Media Queries

1：找到导航栏中断的断点。

2：进行媒体查询

@media(max-width: 89.5em) /*1432px   1em =~ 16px */
{
     #your-css-selector
     {
          /*Your code here*/
     }

}

你在那个栏中有很多东西，如果你想保持大小，你可能需要缩小文本，并可能隐藏像搜索栏这样的元素。

或者你总是可以考虑创建一个collapsable nav。但最终，无论您选择做什么，都更像是一种设计选择。

Answer 2

因为没有空间，它正在破碎。你必须使用类似汉堡菜单的东西来保持高度。检查this