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%;
}

如何在引导导航栏切换时将按钮宽度设置为100％？

1 个答案: