使用 Bootstrap v4-alpha-5 对齐的 .btn-group答案

【问题标题】：Justified .btn-group with Bootstrap v4-alpha-5使用 Bootstrap v4-alpha-5 对齐的 .btn-group
【发布时间】：2017-04-15 20:43:47
【问题描述】：

here 提出的问题解决了

根据我从问题列表中收集到的信息，它已被删除，不会再回来了。

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

我想使用toggle-state radio-buttons

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

有人能提供解决方案吗？

【问题讨论】：

Justify buttons with Bootstrap v4的可能重复
不。阅读问题。我在第一行提到您所指的问题是使用 alpha 3，而当时我使用的是 alpha 5。在您得出结论之前，请阅读该问题。
我的印象是这个问题是关于 Bootstrap 4 的，它的最新答案（顺便说一句，它进入了官方文档）是关于第一个 beta 的。

标签： twitter-bootstrap twitter-bootstrap-4 buttongroup

【解决方案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;
}

【讨论】：

在this 帖子中查看 SCSS 和更多详细信息。
嗨@Max，您发布的链接与我在问题中引用的链接相同！不幸的是，它没有帮助。
哎呀，忽略了！ Philip Stanislaus 的回答在 alpha-6 上为我工作，并打开了 flexbox。不过，我确实必须将每个按钮包装在一个额外的按钮组中。

【解决方案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

【讨论】：

谢谢。我知道他们最近将它添加到文档中，因为它以前没有。
最近我自己一直在找:)
这适用于a's 和buttons，我不能让它与切换一起使用：s（编辑：它确实有效（注意w-100 类）..但它确实会制动切换，现在它们显示输入）