使用 Bootstrap v4-alpha-5 证明 .btn-group

Question

提出的问题解决了 < alpha-3 中的对齐按钮组。它在 alpha-5 中不起作用（我认为在 alpha-4 中也是如此）。

根据我从问题列表中收集到的信息，它已被删除并且不会再出现。

我正在使用 SCSS，如果这提供了更好的解决方案，我可能会使用 flexbox。

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
    </label>
</div>

有人能提供解决方案吗？

Answer 1

如果缺少自定义 css，您可以随时将其添加到代码中

.btn-group-justified {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
}
.btn-group-justified .btn,
.btn-group-justified .btn-group {
    float: none;
    display: table-cell;
    width: 1%;
}
.btn-group-justified .btn .btn,
.btn-group-justified .btn-group .btn {
    width: 100%;
}
.btn-group-justified .btn .dropdown-menu,
.btn-group-justified .btn-group .dropdown-menu {
    left: auto;
}

Answer 2

<div class="btn-group d-flex" role="group">
   <a href="" class="btn btn-secondary w-100">Previous</a>
   <a href="" class="btn btn-secondary w-100">Next</a>
</div>

阅读https://getbootstrap.com/docs/4.0/migration/#button-group

使用 Bootstrap v4-alpha-5 证明 .btn-group

Justified .btn-group with Bootstrap v4-alpha-5

twitter-bootstrap

twitter-bootstrap-4

buttongroup