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

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 中被关闭。非常感谢有关如何使按钮宽度自动缩放以填充容器宽度的任何帮助。很明显，我可以使用   在按钮名称周围添加空格，直到按钮填满宽度，但不同设备所需的空格量不会相同。我在想一个 css override 就可以做到，但我还没有找到一个可行的方法。

Answer 1

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

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

Demo