Question

我不是新手，但不是专家。我已经使用Toggle按钮看到导航栏的响应行为。实际上bootstrap很棒。但我很好奇为什么要隐藏导航栏中的标签以使其响应。我已经完成了一些教程，但找不到任何有用的东西。让我们来看看我们在导航栏中可以拥有的场景

1-icon
2-website title 
3-login/register buttons 
4-may be two /three images (specific to my edge)
5-dropdowns

现在我们可以将这些选项分配给正确的网格空间，但问题是如果我们的导航栏中有这些 5 的内容，那么 360*640 会将选项移至关闭状态。所以，关键是＆＃34;我们可以更动态地做所有事情，以便最小 360*640 的屏幕可以处理所有选项。任何替代插件？ bootstrap中我可能遗失的任何其他选项？

代码更新

 <nav class="navbar navbar-default orange-row" role="navigation">
    <div class="navbar-header col-xs-5 col-sm-5 ">
        <a class="navbar-brand" href="<%= root_url %>"> <img class="logo-img" src="/assets/logo.png" /> </a>
        <a href="<%= root_url %>">
          <font  size="5" face="Comic Sans MS" color="black"><b>  waiterhelper </b></font>
        </a>
    </div>

<div class="col-xs-7 col-sm-7"> 
    <div class="collapse navbar-collapse" id="myNavbar">
  <div class="col-xs-1 col-sm-1 text-center">
      <a href="/customers/comingsoon">
        <img src="/assets/photo-icon.png"          class="img-rounded img-icon"> 
      </a>
    </div>
    <div class="col-xs-2 col-sm-2 text-center">
      <a href="/customers/comingsoon">
        <img src="/assets/list-icon.png" class="img-rounded img-icon">
      </a>
    </div>    
    <div class="col-xs-2 col-sm-2" style=" margin-right: 50px;margin-top: 6pt;">
     <select id="API_source_map"  class="selectpicker" data-style="btn-info">

        <option value="google_places">Google</option>
        <option value="yelp_places">Yelp</option>

     </select> 

           </div>

<div class="col-xs-1 col-sm-1 pull-right" style="margin-top: 6pt;margin-right:5%;">
                 <%= link_to "Logout" , registration_logout_url ,{:class => "btn btn-default unset_conversation_cookie"} %>

</div>                
  </div>  
 </div>

</nav>

响应式Navbar没有切换按钮Bootstrap

0 个答案: