如何强制导航栏中的下拉引导按钮填充整个容器宽度？

Question

我用

加载了css和js

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11./jquery.min.js"> 
</script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">
</script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com
/bootstrap/3.1.1/css/bootstrap.min.css">

在 html 的正文中，我有一个包含页面所有部分的容器。 如果我使用没有下拉菜单的链接，按钮会自动填充容器的宽度。但是，一旦我切换到下拉按钮，按钮宽度不会自动调整大小以填充容器。导航栏的代码在这里：

 <div class="container">   
  <div class="masthead">
    <h3 class="text-muted"></h3>
    <nav>
      <ul class="nav nav-justified">


            <li>
            <div class="btn-group">
              <button class="btn btn-primary dropdown-toggle " type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                Home
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">link</a></li>

                <li role="separator" class="divider"></li>
                <li><a href="#">Contact </a></li>
              </ul>
            </div>
            </li>
            <li>
            <div class="btn-group">
              <button class="btn btn-primary  dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Home
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Contact </a></li>
              </ul>
            </div>
            </li>
            <li>
            <div class="btn-group">
              <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Home
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Contact </a></li>
              </ul>
            </div>              
            </li>
            <li>
            <div class="btn-group">
              <button class="btn btn-primary  dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Home
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Contact </a></li>
              </ul>
            </div>  
            </li>
            <li>

            <div class="btn-group">
              <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Home
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>  
            </li>
            <li>
            <div class="btn-group">
              <button class="btn btn-primary  dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Home
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>  
            </li>





      </ul>
    </nav>
 </div>

容器稍后在 html 中被关闭。任何有关如何使按钮宽度自动缩放以填充容器宽度的帮助将不胜感激。我显然可以使用 &nbsp 在按钮名称周围添加空格，直到按钮填满宽度，但是对于不同的设备，所需的空格量不会相同。我在想一个 CSS 覆盖会做到这一点，但我还没有找到一个可行的。

Answer 1

您可以按照以下提到的步骤来实现：

1. Bootstrap's Helper Class center-block 用于使元素成为块元素。将此类与 .btn-group 一起使用，使其成为块元素（块元素默认占据整个浏览器宽度，除非被覆盖）。
2. Bootstrap's Button Size Class btn-block 可用于使按钮成为具有完整可用宽度的块按钮。您可以将此类与其他按钮类一起使用，以获得全宽按钮。

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com
/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">   
  <div class="masthead">
    <h3 class="text-muted"></h3>
    <nav>
      <ul class="nav nav-justified">
        <li>
          <div class="btn-group center-block">
            <button class="btn btn-primary btn-block dropdown-toggle " type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              Home
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">link</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Contact </a></li>
            </ul>
          </div>
        </li>
        <li>
          <div class="btn-group center-block">
            <button class="btn btn-primary btn-block dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Home
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">link</a></li>
              <li><a href="#">link</a></li>
              <li><a href="#">link</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Contact </a></li>
            </ul>
          </div>
        </li>
        <li>
          <div class="btn-group center-block">
            <button class="btn btn-primary btn-block dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Home
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">link</a></li>
              <li><a href="#">link</a></li>
              <li><a href="#">link</a></li>
              <li><a href="#">link</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Contact </a></li>
            </ul>
          </div>              
        </li>
        <li>
          <div class="btn-group center-block">
            <button class="btn btn-primary btn-block dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Home
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">link</a></li>
              <li><a href="#">link</a></li>
              <li><a href="#">link</a></li>
              <li><a href="#">link</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Contact </a></li>
            </ul>
          </div>  
        </li>
        <li>
          <div class="btn-group center-block">
            <button class="btn btn-primary btn-block dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Home
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">link</a></li>
              <li><a href="#">link</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>  
        </li>
        <li>
          <div class="btn-group center-block">
            <button class="btn btn-primary btn-block dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Home
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">link</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>  
        </li>
      </ul>
    </nav>
  </div>

Answer 2

更改 btn-group 的显示属性并为按钮添加宽度。

button.btn.btn-primary.dropdown-toggle {
    width: 100%;
}
.btn-group {
    display: block;
}

Demo