显示列内的引导按钮单选按钮

Question

实现Bootstrap Buttons.

当您将每个标签放在一个 div 中时，单选按钮就会出现。删除 div 并且单选按钮不会出现。如何在 div 内部实现并隐藏单选按钮？我们只想要一个 div 内部，这样我们就可以使用 cols。

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

Answer 1

您只需将display: none 样式应用于输入元素。

bootstrap css 规则只适用于

[data-toggle="buttons"] > .btn > input[type="radio"], [data-toggle="buttons"] > .btn > input[type="checkbox"]

因此，添加 div 会破坏该选择。

您可以创建自己的类或内联样式显示：输入元素上无。