如何在移动设备和平板电脑设备上使导航菜单响应为两行？

Question

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>&nbsp;Add New Page</a> </li> <li id="item"> <a href="javascript:void(0)" id="Edit"><i class="fa fa-pencil-square-o"></i>&nbsp;Update Page</a> </li> <li id="item"> <a href="javascript:void(0)" id="Cancel"><i class="fa fa-undo"></i>&nbsp;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>&nbsp;Copy</a></li> <li><a href="javascript:void(0)" onclick="paste('frm')"><i class="fa fa-clipboard"></i>&nbsp;Paste</a></li> <li><a href="javascript:void(0)" id="Reverse"><i class="fa fa-reply"></i>&nbsp;Delete</a></li> <li class="divider"></li> <li><a href="javascript:void(0)" id="listLive"><i class="fa fa-list"></i>&nbsp;List Page</a></li> <li><a href="javascript:void(0)" id="listAuth"><i class="fa fa-list"></i>&nbsp;List draft Page</a></li> <li><a href="javascript:void(0)" id="listHist"><i class="fa fa-list"></i>&nbsp;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>&nbsp;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.

Answer 1

I cannot say I would recommend this approach as it's rather antithetical to the scope of the Navbar component (which is to responsively collapse links, not expand vertically). That being said, if we restructure your code to comply with Bootstrap 3.x formatting and apply a bit more of the Bootstrap Grid into your Navbar you can get something functional.

 <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> 

Where this approach is, perhaps, a little more friendly is that it relies exclusively on Bootstraps native responsive framework; you don't need to create your own media query rules at all.

Where you're going to run into some difficulty is the btn-group . When you use <button> you cannot take advantage of btn-group-justified so this button will never make full use of the column if it doesn't need to.

I would also encourage you to review Bootstraps Documentation for proper usage of its framework. The code you've presented above utilizes classes incorrectly in several places which may impact expected functionality.

Additionally, please note that the ID attribute is meant to be unique; your <li id="item"> should either be changed to reflect a unique ID for each list item, or to use a class (which does not need to be unique).