Bootstrap 按钮单选按钮显示在列内

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 样式应用于输入元素。

bootstrapcss规则仅适用于

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

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

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