Css 设置按钮组'；将宽度设置为100%，并使按钮宽度相等？

我使用的是Bootstrap，我想将整个

btn组

的宽度设置为其父元素的100%。我还希望内部按钮的宽度相等。事实上，我也做不到

我在这里做了一个JSFiddle：

以下是HTML：

<div class="span8 background">
<div class="btn-group btn-block" id="colours">
<span class="btn"><input type='checkbox' name='size' value='red'/>red</span>
<span class="btn"><input type='checkbox' name='size' value='orange'/>orange</span>
<span class="btn"><input type='checkbox' name='size' value='yellow'/>yellow</span>
</div> <!-- /btn-group -->
</div>

---

引导程序2（）

问题是按钮上没有设置宽度。试试这个：

.btn {width:20%;}

编辑：

默认情况下，按钮的自动宽度为文本长度加上一些填充，因此我猜对于您的示例，5个按钮的自动宽度可能更接近14.5%（以补偿填充）

注意：

如果不想尝试补偿填充，可以使用

框大小：边框框

我不喜欢.btn上设置宽度的解决方案，因为它假定.btn组中的项目数始终相同。这是一个错误的假设，并导致臃肿的、特定于表示的CSS

更好的解决方案是更改带有.btn块和子.btn的.btn组的显示方式。我相信这就是你想要的：

.btn-group.btn-block {
    display: table;
}
.btn-group.btn-block > .btn {
    display: table-cell;
}

这是一把小提琴：

如果您希望具有等宽按钮（合理范围内），并且只能支持支持flexbox的浏览器，请尝试以下方法：

.btn-group.btn-block {
    display: flex;
}
.btn-group.btn-block > .btn {
    flex: 1;
}

这里有一个小把戏：
引导程序具有
.btn组对齐的
css类

它的结构取决于您使用的标记类型



...



左边
中间的
赖特
不需要额外的css，
.btn group-justified
类可以这样做

您必须将其添加到父元素中，然后将每个btn元素用.btn组包装在一个div中，如下所示

    <div class="form-group">

            <div class="btn-group btn-group-justified">
                <div class="btn-group">
                    <button type="submit" id="like" class="btn btn-lg btn-success ">Like</button>
                </div>
                <div class="btn-group">
                    <button type="submit" id="nope" class="btn btn-lg btn-danger ">Nope</button>
                </div>
            </div>

        </div>


喜欢
不
角度-等宽按钮组

假设你的范围内有一系列的“东西”


确保父div的宽度为100%
用于在按钮组中创建按钮
用于计算每个按钮的宽度



{{thing}}


行动
切换下拉菜单
引导4

            <ul class="nav nav-pills nav-fill">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Active</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Longer nav link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>











对于引导程序4只需添加此类：

w-100
引导4解决方案

<div class="btn-group w-100">
    <button type="button" class="btn">One</button>
    <button type="button" class="btn">Two</button>
    <button type="button" class="btn">Three</button>
</div>


一个
两个
三

通过向
w-100
类添加
btn组，您基本上可以告诉它宽度为100%。内部的按钮将自动填充整个空间。
已删除引导4。btn组已对齐。作为替代，您可以使用
作为.w-100元素的包装器

试试这个：

.btn {width:20%;}

<div class="btn-group d-flex" role="group>
  <button type="button" class="btn btn-primary w-100">Submit</button>
  <button type="button" class="btn btn-primary w-100">Cancel</button>
</div>

完成！（只需等待5分钟，直到SO允许我接受。）再次感谢。检查css3规则“flex”@andersoyvind感谢您提供的信息，但是我在W3傻瓜网站上还没有完全被说服。我用过盒子尺寸：边框盒；所以我知道它是有效的，我知道这个页面上列出的语法/信息是准确的。请记住，任何记录代码的页面都很容易出错，最好的方法是测试代码。如果您事先不知道按钮的数量，该怎么办？@CDT，您可能会在几天内使用flex now。假设您不必支持IE的旧版本。Oregon Jeff在他的回答中有一个flex的例子。哦，其次：对于Bootstrap 3，使用
。btn group justified
这不会为单个按钮生成相等的长度。有什么要补充的吗？@PiotrekZatorski，你错了。我提供的示例使用的是Bootstrap 2，但是这个更新版本使用的是Bootstrap 3.3.6@我的第二小提琴手MalayDesai绝对能制作出等宽按钮（在合理范围内）。如果你在其中一个按钮中放了大量的文本，而在其他按钮中放了很少的文本，显然不会，但是对于长度相似的按钮字符串，它们的宽度都是相同的。在第二部分中，它们都是96px宽。举个例子可能会有用。需要指出的是，使用
.btn group justified
时，在基于
的结构上存在差异，这应该是公认的答案。你知道为什么我们需要将每个
.btn
包装在
.btn组中吗？这就是我想要的，谢谢。当我们修改宽度时，它肯定会扼杀响应能力。这很好用。：-）此选项已在Bootstrap 4中删除：这将平均分割按钮，如果您希望一个按钮比另一个按钮大，则需要设置每个按钮的宽度：
将为您提供80-20的分割。代码片段应始终附带某种解释，说明代码工作的原因。谢谢这里回答了Bootstrap 4，如果一行中的一个按钮有换行文字，而另一个按钮没有换行文字，也可以添加h-100。这个答案很好，获取按钮的大小以适应屏幕的分辨率。
            <ul class="nav nav-pills nav-fill">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Active</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Longer nav link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>

<div class="btn-group w-100">
    <button type="button" class="btn">One</button>
    <button type="button" class="btn">Two</button>
    <button type="button" class="btn">Three</button>
</div>

<div class="btn-group d-flex" role="group>
  <button type="button" class="btn btn-primary w-100">Submit</button>
  <button type="button" class="btn btn-primary w-100">Cancel</button>
</div>