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

Question

我有一个导航菜单，我试图让它在手机和平​​板电脑断点上以两行响应。

我执行此操作的 html 代码如下所示，但它似乎对我不起作用。

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

我想将 New Edit Cancel 保留为一行，而将 text box and drop down 作为移动和平板电脑断点的另一行。虽然我将文本框设置为显示 block 并清除 both 以强制它换行，但它不会像我的另一行一样换行。

我可以根据需要对上述结果进行存档的 css 样式技巧是什么？谢谢。

Answer 1

我不能说我会推荐这种方法，因为它与 Navbar 的范围相当对立组件(用于响应地折叠链接，而不是垂直展开)。也就是说，如果我们重组您的代码以符合 Bootstrap 3.x 格式并将更多的 Bootstrap 网格应用到您的 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">应该更改以反射(reflect)独特的 ID对于每个列表项，或使用一个类(不需要是唯一的)。