I have navigation menu that I tried to make it responsive in two rows on mobile phone and tablet break point.
My html code to do this is like below but it does not seem to work for me.
.navbar-default .navbar-nav>li {
display: inline-block;
}
@media all and (max-width: 841px) {
#ID {
clear:both;
display: block;
margin-left: 25px;
}
li#liMore ul.dropdown-menu {
position: absolute !important;
background: #f8f8f8 !important;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="navbar navbar-default navbar-static-top" role="navigation">
<ul class="nav navbar-nav">
<li id="item">
<a href="javascript:void(0)" id="New"><i class="fa fa-file-text-o"></i> Add New Page</a>
</li>
<li id="item">
<a href="javascript:void(0)" id="Edit"><i class="fa fa-pencil-square-o"></i> Update Page</a>
</li>
<li id="item">
<a href="javascript:void(0)" id="Cancel"><i class="fa fa-undo"></i> Cancel</a>
</li>
<li id="liID">
<div class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" name="ID" id="ID" placeholder="Enter ID" value="" style="width:197px;">
</div>
</div>
</li>
<li id="liMore">
<div class="btn-group" style="">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">More Actions</button>
<button type="button" class="btn btn-primary" data-toggle="dropdown">
<i class="fa fa-caret-down"></i>
</button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)" onclick="copy('frm')"><i class="fa fa-files-o"></i> Copy</a></li>
<li><a href="javascript:void(0)" onclick="paste('frm')"><i class="fa fa-clipboard"></i> Paste</a></li>
<li><a href="javascript:void(0)" id="Reverse"><i class="fa fa-reply"></i> Delete</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)" id="listLive"><i class="fa fa-list"></i> List Page</a></li>
<li><a href="javascript:void(0)" id="listAuth"><i class="fa fa-list"></i> List draft Page</a></li>
<li><a href="javascript:void(0)" id="listHist"><i class="fa fa-list"></i> List saved Page</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)" onclick="exportCSV.apply(this,['frm','export.csv'])"><i class="fa fa-print"></i> Export</a></li>
</ul>
</div>
</li>
</ul>
</div>I would like to keep New Edit Cancel as one row while text box and drop down as another row on mobile and tablet break point. Although I set text box to display block and clear both to force it break into new line, it does not break into new line as another row for me.
What is css style trick that I can do to archive above result as I want? Thanks.
答案 0 :(得分：1)
我不能说我会推荐这种方法，因为它与Navbar组件的范围相反（它反应性地折叠链接，而不是垂直扩展）。话虽这么说，如果我们重构您的代码以符合Bootstrap 3.x格式并将更多的Bootstrap Grid应用到您的Navbar中，您可以获得一些功能。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-8">
<ul class="nav navbar-nav">
<li class="pull-left"><a href=""><i class="fa fa-file-text-o"></i> Add New Page</a></li>
<li class="pull-left"><a href=""><i class="fa fa-pencil-square-o"></i> Update Page</a></li>
<li class="pull-left"><a href=""><i class="fa fa-undo"></i> Cancel</a></li>
</ul>
</div>
<div class="col-xs-12 col-md-4">
<div class="row">
<div class="col-xs-8 col-md-7">
<form class="navbar-btn form-horizontal">
<input type="text" class="form-control" placeholder="Enter ID">
</form>
</div>
<div class="col-xs-4 col-md-5">
<div class="btn-group navbar-btn">
<button type="button" class="btn btn-primary" data-toggle="dropdown">More Actions</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button>
<ul class="dropdown-menu">
<li><a href=""><i class="fa fa-files-o"></i> Copy</a></li>
<li><a href=""><i class="fa fa-clipboard"></i> Paste</a></li>
<li><a href=""><i class="fa fa-reply"></i> Delete</a></li>
<li class="divider"></li>
<li><a href=""><i class="fa fa-list"></i> List Page</a></li>
<li><a href=""><i class="fa fa-list"></i> List draft Page</a></li>
<li><a href=""><i class="fa fa-list"></i> List saved Page</a></li>
<li class="divider"></li>
<li><a href=""><i class="fa fa-print"></i> Export</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
这种方法或许更友好一点，它完全依赖于Bootstraps原生响应框架;您根本不需要创建自己的媒体查询规则。
btn-group会遇到一些困难。当您使用<button>时，您无法利用btn-group-justified，因此如果不需要，此按钮将永远不会充分利用该列。
我还建议您查看Bootstraps文档以正确使用其框架。您上面提到的代码在几个地方使用了错误的类，这可能会影响预期的功能。
此外，请注意ID属性应该是唯一的;您的<li id="item">应该更改为反映每个列表项的唯一ID，或者使用类（不需要是唯一的）。