修改引导导航栏

Question

我正在尝试修改我的引导导航栏以在不同的媒体屏幕上显示一些链接（列表项），例如在我的导航栏列表上，我有一些列表，包括搜索和登录/注册列表项，所以在我想要的手机或平板电脑上显示搜索和登录/注册列表项目和我的导航栏品牌，而不是只显示导航栏品牌并折叠所有列表项目，尝试了不同的方法，例如从下拉列表中排除我的搜索和登录/注册列表项目等但是还是不行。

这是我的 HTML 代码，但 CSS 只是引导 css(bootstrap.css)。 如果您也可以在没有引导程序的情况下做到这一点，请帮助我。 View the working code on jsbin.

或者

<nav class = "navbar navbar-inverse">
    <div class = "navbar-header">
        <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#mynav">
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
        </button>
        <a href = "#" class = "navbar-brand">Stack Ask</a>
    </div>

    <div class = "collapse navbar-collapse" id = "mynav">
        <ul class = "nav navbar-nav">
            <li class = "active"><a href = "#">Home</a></li>
            <li><a href = "#">Education</a></li>
            <li class = "dropdown"><a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">Tutorials
                <span class = "caret"></span>
                </a>
                <div class = "dropdown-menu">
                    <ul class = "nav navbar-nav">
                        <li><a href = "#">Programming Languages</a></li>
                        <li><a href = "#">Web Development</a></li>
                    </ul>
                </div>
            </li>
            <li><a href = "#">Kingdom Centre</a></li>
            <li><a href = "">About</a></li>
        </ul>

        <ul class = "nav navbar-nav navbar-right">
            <li class = "dropdown"><a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"><span class = "glyphicon glyphicon-search"></span> Search</a>

                <div class = "dropdown-menu">
                    <ul class = "nav navbar-nav">
                        <li>
                            <form class="form-search">
                                <div class = "container-fluid">
                                    <input type="text" class="form-control input-medium search-query" style = "border-radius: 25px;" />
                                    <button type="submit" class="btn" style = "margin-top: 10px; margin-left: 5px;">Search</button>
                                </div>
                            </form>
                        </li>
                    </ul>
                </div>
            </li>

            <li><a href = "#"><span class = "glyphicon glyphicon-user"></span> Sign Up</a></li>
            <li><a href = "#"><span class = "glyphicon glyphicon-log-in"></span></span> Log In</a></li>
        </ul>
    </div>
</nav>

Answer 1

我认为您不希望用于搜索、登录等的折叠属性...所以请在折叠 div 之外添加第二个 ul 并添加唯一类以通过媒体查询（例如：信息）选择并添加下面的代码

@media screen and (max-width: 768px) {
  .info li {
    float: left;
    padding: 0 10px;
  }
} 

Answer 2

你也可以使用hidden-xs、hidden-sm、hidden-md和hidden-lg类来显示和隐藏特定的ul，也许你需要复制你的ul！！您更新的代码如下： Bin here

.mob-nav>li
{
  float:left
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <nav class = "navbar navbar-inverse">
          <div class = "navbar-header">
              <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#mynav">
    		    	<span class = "icon-bar"></span>
    				<span class = "icon-bar"></span>
    				<span class = "icon-bar"></span>
    		   </button>
    		   <a href = "#" class = "navbar-brand">Stack Ask</a>
                  <ul class = "mob-nav hidden-sm hidden-md hidden-lg nav navbar-nav ">
    			  	 <li class = "dropdown"><a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"><span class = "glyphicon glyphicon-search"></span> Search</a>
    			         <div class = "dropdown-menu">
    				         <ul class = "nav navbar-nav">
    						     <li>
    						         <form class="form-search">
    						              <div class = "container-fluid">
    						                   <input type="text" class="form-control input-medium search-query" style = "border-radius: 25px;" />
    						                   <button type="submit" class="btn" style = "margin-top: 10px; margin-left: 5px;">Search</button>
    						              </div>
    					       	      </form>
    				     		  </li>
    						  </ul>
    					  </div>
    				   </li>
    				   <li><a href = "#"><span class = "glyphicon glyphicon-user"></span> Sign Up</a></li>
    					<li><a href = "#"><span class = "glyphicon glyphicon-log-in"></span></span> Log In</a></li>
    				</ul>
    		</div>
    		<div class = "collapse navbar-collapse" id = "mynav">
    		     <ul class = "nav navbar-nav">
    					<li class = "active"><a href = "#">Home</a></li>
    					<li><a href = "#">Education</a></li>
    					<li class = "dropdown">
                            <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">Tutorials
    							<span class = "caret"></span>
    						</a>
    						<div class = "dropdown-menu">
    							<ul class = "nav navbar-nav">
    								<li><a href = "#">Programming Languages</a></li>
    								<li><a href = "#">Web Development</a></li>
    							</ul>
    						</div>
    					</li>
    					<li><a href = "#">Kingdom Centre</a></li>
    					<li><a href = "">About</a></li>
    			  </ul>
    						
    			  <ul class = "hidden-xs nav navbar-nav navbar-right">
    					<li class = "dropdown"><a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"><span class = "glyphicon glyphicon-search"></span> Search</a>
    							
    			  <div class = "dropdown-menu">
    					<ul class = "nav navbar-nav">
    					    <li>
    					       <form class="form-search">
    					            <div class = "container-fluid">
    			    	                 <input type="text" class="form-control input-medium search-query" style = "border-radius: 25px;" />
    					                 <button type="submit" class="btn" style = "margin-top: 10px; margin-left: 5px;">Search</button>
    				       			</div>
    		            		</form>
    	     				</li>
    					</ul>
    				</div>
    			</li>
    							
    			<li><a href = "#"><span class = "glyphicon glyphicon-user"></span> Sign Up</a></li>
    			<li><a href = "#"><span class = "glyphicon glyphicon-log-in"></span></span> Log In</a></li>
         	</ul>
     </div>
    </nav>