如何使单选按钮组可折叠？答案

【问题标题】：How to make radio button group collapsable?如何使单选按钮组可折叠？
【发布时间】：2017-01-06 19:20:46
【问题描述】：

我有一种菜单栏，它由我使用引导程序设计为按钮的单选按钮（在按钮组中）组成。现在我想让它响应，这样当窗口足够窄时，它们就会折叠成一个下拉按钮。我在引导文档中找不到任何类似的东西，所以我不知道如何实现这一点 - 任何建议都将不胜感激。

这是我的代码：

<div class="row col-md-12">
    <div style="clear: both; display: inline;">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-info btn-sm active" style="width: 300px;"><input type="radio"  value="0" class="check" name="options" id="option1" autocomplete="off" checked>1</label>
            <label class="btn btn-info btn-sm" style="width: 300px;"><input type="radio" value="1" class="check" name="options" id="option2" autocomplete="off">2</label>
            <label class="btn btn-info btn-sm" style="width: 300px;"><input type="radio" value="2" class="check" name="options" id="option3" autocomplete="off">3</label>
        </div>
    </div>
</div>

【问题讨论】：

在 CSS 中使用 @media screen 并更改 div 的宽度和高度，如果是你想要的
我也想将按钮（标签）排列到下拉菜单中，我也可以通过@media screen来实现吗？
试试这个我认为它对你有用eyecon.ro/bootstrap-tabdrop

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

<div class="row col-md-12">
    <div style="clear: both; display: inline;">
        <div class="btn-group" data-toggle="collapse">
            <div class="dropdown-button-container">
                <label class="btn btn-info btn-sm active" style="width: 300px;"><input autocomplete="off" checked class="check" id="option1" name="options" type="radio" value="0">1</label> <label class="btn btn-info btn-sm" style="width: 300px;"><input autocomplete="off" class="check" id="option2" name="options" type="radio" value="1">2</label> <label class="btn btn-info btn-sm" style="width: 300px;"><input autocomplete="off" class="check" id="option3" name="options" type="radio" value="2">3</label>
            </div>
        </div>
    </div>
</div>

Javascript

$(window).on("load, resize", function () {
    var viewportWidth = $(window).width();
    if (viewportWidth < 768) {
        $(".dropdown-button-container").addClass("collapse");
    } else {
        $(".dropdown-button-container").removeClass("collapse");
});

这是我根据所提供的信息所能获得的具体信息。

【讨论】：