Bootstrap 3 btn 组宽度

Question

我还有另一个与 Bootstrap 相关的问题。 我想在我的表单中添加单选框和复选框，我希望它们也占据表单元素的 100% 宽度。

我添加了这样的按钮组：

<div class="form-group">
    <label class="col-sm-3 control-label">Subscribe</label>
    <div class="col-sm-9">
        <div class="btn-group input-group" data-toggle="buttons">
            <label class="btn btn-success">
                <input type="radio" name="options" id="option1" />Yes</label>
            <label class="btn btn-primary">
                <input type="radio" name="options" id="option2" />Maybe</label>
            <label class="btn btn-danger">
                <input type="radio" name="options" id="option3" />No</label>
        </div>
    </div>
</div>

这给了我很好的单选按钮：

但正如您所见，它们的宽度是固定的。这可以通过引导类解决吗？ 这里又是我的示例代码：http://jsfiddle.net/Misiu/yy5HZ/5/

Answer 1

对于 boostrap 4，文档说您可以这样做：

删除了.btn-group-justified。作为替代，您可以使用<div class="btn-group d-flex" role="group"></div> 作为带有.w-100 的元素的包装器。

Answer 2

如果@Schmalzy 的解决方案不起作用，那么您可能正在使用 Bootstrap v3.0.0，除了@Schmalzy 解决方案中的 html 标记之外，还添加了以下样式。

.btn-group-justified > .btn-group .btn {
    width: 100%;
}

.btn-group-justified > .btn, .btn-group-justified > .btn-group {
    display: table-cell;
    float: none;
    width: 1%;
}

Answer 3

另一种解决方案：

.btn-group {
    display: flex;
    flex-direction: row;
}

.btn-group > button {
    width: 100%;
}

Answer 4

使用内置的.btn-group-justified类：Offical Docs

使一组按钮以相同的大小伸展以跨越整个 其父项的宽度。也适用于 按钮组。

锚点：

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group"> 
    <a href="#" class="btn btn-default" role="button">Left</a>
    <a href="#" class="btn btn-default" role="button">Middle</a>
    <a href="#" class="btn btn-default" role="button">Right</a> 
</div>

按钮：

要使用带有<button> 元素的对齐按钮组，您必须换行 按钮组中的每个按钮。大多数浏览器没有正确应用我们的 CSS 用于证明 <button> 元素，但因为我们支持 按钮下拉菜单，我们可以解决这个问题。

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

JSFiddle

Answer 5

您可以简单地使用引导 col-n 类，因此如果您有 2 个按钮，您可以在它们上使用 col-xs-6。例如，问题是当您有 5 个按钮时。在引导网格系统中没有这样的类。所以我会使用以下之一：

要区分具有不同数量按钮的组，请使用其他自定义类：

JSFiddle

CSS

.btn-group {
    width: 100%;
}
.btn-group-2 label.btn  {
    width: 50%;
}
.btn-group-3 label.btn  {
    width: 33.3%;
}

HTML

<div class="btn-group btn-group-3 input-group" data-toggle="buttons">
    <label class="btn btn-success">
        <input type="radio" name="options" id="option1" />Yes</label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2" />Maybe</label>
    <label class="btn btn-danger">
        <input type="radio" name="options" id="option3" />No</label>
</div>

如果你想避免这些css类你只能使用jQuery：

JSFiddle

$('.btn-group').each(function(index, item) {
    $(item).find('.btn').css(
        'width', 100 / $(item).find('.btn').length + '%'
    )
});

Answer 6

您可以添加自己的类，并为它们提供 33% 的宽度（对于 3 个按钮）或 50% 的宽度（对于 2 个按钮）。