jquery - 修改 Bootstrap 导航栏

Question

我正在尝试修改我的 Bootstrap 导航栏以在不同的媒体屏幕上显示一些链接(列表项)，例如在我的导航栏列表上我有一些列表包括搜索和登录/注册列表项，所以我想在手机或平板电脑上显示搜索和登录/注册列表项以及我的导航栏品牌，而不是仅显示导航栏品牌并折叠所有列表项，尝试了不同的方法，例如从下拉列表中排除我的搜索和登录/注册列表项等，但是仍然无法正常工作。

这是我的 HTML 代码，但 CSS 只是 Bootstrap css (bootstrap.css)。 如果您也可以在没有 Bootstrap 的情况下做到这一点，请帮助我。 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

或者，您可以使用 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>