jquery - Bootstrap 导航栏切换时如何将按钮宽度设置为 100%？

Question

我有几个按钮下拉列表，我想知道如何将导航按钮切换为 100% 宽度。

例如，在这里我们可以看到按钮没有占据所有空间: example in jsfiddle

这是我的代码:

    <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <div class="btn-group navbar-btn">
          <button type="button" class="btn btn-default dropdown-toggle navbar-toggle" data-toggle="dropdown" aria-expanded="false">
            Catégories <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Cat 1</a></li>
            <li><a href="#">Cat 2</a></li>
          </ul>
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            Filtres <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Filtre 1</a></li>
            <li><a href="#">Filtre 2</a></li>
          </ul>
        </div>        
        <div class="btn-group navbar-right navbar-btn" role="group" aria-label="">
          <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon glyphicon-th" aria-hidden="true"></span>
          </button>
          <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
          </button>
        </div>
        <form class="navbar-form navbar-right" role="search">
          <input type="text" class="form-control" placeholder="Rechercher"> 
        </form>
      </div>

谁有解决办法？

提前致谢

Answer 1

查看您当前的代码，您可以添加以下 css:

.navbar-btn,.navbar-btn .btn{
    width:100%;
}