我试图修改我的引导导航栏以在不同的媒体屏幕上显示一些链接（列表项），例如在我的导航栏列表上我有一些列表包括搜索和登录/注册列表项，所以在手机或平板电脑上我想要显示搜索和登录/注册列表项和我的navbar品牌，而不是仅显示导航栏品牌并折叠所有列表项，尝试了不同的方法，例如从下拉列表中排除我的搜索和登录/注册列表项等但是仍然没有工作。
这是我的HTML代码，但CSS只是bootstrap css（bootstrap.css）。
请帮助我，如果你能在没有引导程序的情况下做到这一点。 rtrim
或
var soqlCountry = new SoqlQuery().Select(columns).Limit(50000)
答案 0 :(得分：0)
我认为你不希望崩溃属性用于搜索，登录等...所以请在崩溃div之外找出第二个ul并添加唯一类来通过媒体quires选择（例如：info）并添加下面的代码
@media screen and (max-width: 768px) {
.info li {
float: left;
padding: 0 10px;
}
}
答案 1 :(得分：0)
您也可以使用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>