html - 如何将按钮的 div 编码为 Bootstrap 响应？

Question

我正在使用 Bootstrap 3.0 对我的网站进行编码。所以我有这个导航区域，它由 6 个按钮组成，这些按钮在页面上水平运行。但是，一旦用户调整浏览器大小或在较小的屏幕(如平板电脑和手机)上查看网站，我想让这个导航区域变成一个带有菜单图标的栏。

我该如何编写代码，以便在较小的设备上查看时它会变成带有菜单图标的导航栏。我是否应该使用“nav”和“ul”等将此区域更改为实际的导航栏 div？然后将“li”编码为看起来像按钮？

HTML

<div class="row" style="margin-bottom: 10px; margin-left: -37px;">
      <div class="col-md-2"><button type="button" class="btn btn-primary"><a href="index.html">Home</a></button></div>
      <div class="col-md-2"><button type="button" class="btn btn-primary"><a href="index.html">Description</a></button></div>
      <div class="col-md-2"><button type="button" class="btn btn-primary"><a href="gallery.html">Gallery</a></button></div>
      <div class="col-md-2"><button type="button" class="btn btn-primary"><a href="index.html">Location</a></button></div>
      <div class="col-md-2"><button type="button" class="btn btn-primary"><a href="index.html">Availability</a></button></div>
      <div class="col-md-2"><button type="button" class="btn btn-primary"><a href="index.html">Rates</a></button></div>
  </div>

Answer 1

Just see this example code or goto http://getbootstrap.com/components/#navbar for more details
<nav role="navigation" class=" navbar navbar-default ">
<div class="navbar-header">
   <button data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle" type="button">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

        </div>
 <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
<li><a class="active" href="">Home</a></li>
<li><a href="">Demo</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Plans &amp; Pricing</a></li>
</ul>
</div>

</nav>