Bootstrap 3按钮组的宽度

Question

Bootstrap 3按钮组的宽度

23

我有一个与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/

- Misiu

2

@Misiu 只需将内置类.btn-group-justified添加到.btn-group即可。 - Schmalzy

6个回答

4

你可以简单地使用 bootstrap col-n 类，如果你有 2 个按钮，可以在它们上面使用 col-xs-6。问题是当你有 5 个按钮时。在 bootstrap 网格系统中没有这种类。所以我会使用以下之一:

为了区分具有不同数量按钮的组，请使用其他自定义类： 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 + '%'
    )
});

- Markus Kottländer

两个按钮怎么办？我需要创建另一个类吗？ - Misiu

1

@Misiu，现在你有两种方法可以实现它。其中一个应该适合你。 :) - Markus Kottländer

是的 :) 两种方法都可以 :) 感谢提供这两个解决方案，我尝试了@Valerie的解决方案但没有成功。我可能会选择只使用CSS的解决方案。不幸的是，这不是Bootstrap默认内置的功能。再次感谢！ - Misiu

1

为什么不直接使用内置的.btn-group-justified类呢？ - Schmalzy

2

另一种解决方案：

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

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

- Feeco

1

对于Bootstrap 4，文档中说你可以这样做：

删除.btn-group-justified。取而代之的是，你可以使用<div class="btn-group d-flex" role="group"></div>作为包装器，将带有.w-100类的元素包裹起来。

- max kaplan

0

如果@Schmalzy的解决方案不起作用，那么你可能正在使用Bootstrap v3.0.0版本，此时需要在@Schmalzy的解决方案中添加以下样式。

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

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

- ZerosAndOnes

0

您可以自己添加一个类，并给它们一个33%的宽度（适用于3个按钮）或50%的宽度（适用于2个按钮）。

- Valerie

1

我知道这个，但是如果我有4、5、6个按钮，这样我必须创建特定的类。我想避免这种情况。 - Misiu

给他们使用Bootstrap的col-classes怎么样？Bootstrap网格 - Valerie

@Valerie 如果有5个按钮，你会怎么做？ - Markus Kottländer

嗯，你骗了我:D 我知道我在一个复制项目中做过类似的事情，我会把我的代码放在我的帖子编辑中。 - Valerie

嗯，我看到那段代码使用了封装和其他的一些类，所以可能不是你要找的。也许你可以用jQuery来实现？如果你知道按钮的数量，你就可以通过将宽度分成按钮数量的比例并将其作为按钮类的宽度添加。 - Valerie

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Schmalzy · Accepted Answer

使用内置的.btn-group-justified类：官方文档

创建一组按钮，使其等大小地拉伸以跨越其父元素的整个宽度。也适用于按钮组中的下拉按钮。

锚点：

<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