如何编写按钮 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>