导航菜单如何响应移动平板电脑

Question

我尝试让我的导航菜单在移动设备和平板电脑上保持响应，但是当我从浏览器开发工具测试响应式移动设备时，它总是突破新的界限。

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Application Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<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>

      <a href="javascript:void(0)" id="New"><i class='fa fa-floppy-o'></i>&nbsp;New</a>
    </li>
    <li>
      <a href="javascript:void(0)" id="Edit"><i class='fa fa-pencil-square-o'></i>&nbsp;Edit</a>
    </li>
    <li><a href="javascript:void(0)" id="Authorize"><i class='fa fa-check'></i>&nbsp;Cancel</a></li>

    <li>
      <div class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" name="ID" ID="ID">

        </div>
      </div>
    </li>

    <li>
      <div class="btn-group" style="padding: 9px 0px 0px 0px; margin-left: 15px;">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">More Action</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 Record</a></li>
          <li><a href="javascript:void(0)" onclick="paste('frm')"><i class='fa fa-clipboard'></i>&nbsp;Paste Record</a></li>
          <li><a href="javascript:void(0)" id="Reverse"><i class='fa fa-reply'></i>&nbsp;Reverse Record</a></li>
          <li class="divider"></li>
          <li><a href="javascript:void(0)" id="listLive"><i class='fa fa-list'></i>&nbsp;List Live Record</a></li>
          <li><a href="javascript:void(0)" id="listAuth"><i class='fa fa-list'></i>&nbsp;List Un-authorize Record</a></li>
          <li><a href="javascript:void(0)" id="listHist"><i class='fa fa-list'></i>&nbsp;List History Record</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 Record</a></li>
        </ul>
      </div>
    </li>
  </ul>

</div>

我想保持菜单按钮，输入框和下拉菜单即使在移动平板电脑断点上也保持一行。

我如何存档，我不确定问题是否由<meta name="viewport" content="width=device-width, initial-scale=1">引起，但我唯一的目标是保持响应。感谢。