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>

这给了我很好的收音机按钮：

但是你可以看到他们有固定的宽度。这可以用bootstrap类修复吗？这里是我的示例代码：http://jsfiddle.net/Misiu/yy5HZ/5/

Answer 1

使用内置的.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>元素的对齐按钮组，必须换行 按钮组中的每个按钮。大多数浏览器没有正确应用我们的用于<button>元素的理由的CSS，但是因为我们支持按钮下拉菜单，我们可以解决这个问题。

<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 2

您可以简单地使用bootstrap 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 3

另一种解决方案：

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

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

Answer 4

对于boostrap 4，文档说您可以执行以下操作：

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

Answer 5

你可以添加一个属于自己的类，给它们33％的宽度（对于3个按钮）或50％的宽度（对于2个按钮）。

Answer 6

如果@ 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%;
}

Bootstrap 3 btn-group width

6 个答案: