我加载了 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 就可以做到,但我还没有找到一个可行的方法。
最佳答案
更改 btn-group 的显示属性并为按钮添加宽度。
button.btn.btn-primary.dropdown-toggle {
width: 100%;
}
.btn-group {
display: block;
}
关于html - 如何强制导航栏中的下拉 Bootstrap 按钮填充整个容器宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39340572/