Question

在普通的HTML单选按钮中，可以非常方便地查看选择了哪个按钮（即使将光标移开也会保持选中状态）。如何使用Bootstrap制作相同的样式（即在将光标移开后使选定的按钮保持较暗）？这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Button example</title>
        <link rel="stylesheet" href="./styles/bootstrap.min.css" />
        <script type="text/javascript" scr="./scripts/jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="./scripts/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">


        <div class="form-group" name="option6" style="text-align: center;">
            <div class="btn-group-vertical" data-toggle="buttons">

                <label class="btn btn-primary">
                    <input type="radio" name="option6" checked="checked" value="have">have<br>
                </label>

                <label class="btn btn-primary">
                    <input type="radio" name="option6" value="is having">is having<br>
                </label>
            </div>          
        </div>

    </div>        

    </body>

</html>

但是在我移开光标后，这个按钮保持不被选中状态。

Answer 1

您的代码没有出现任何问题...在这里工作JSFiddle

确保JS加载和CSS。

（也许./styles/bootstrap.min.css应为css/bootstrap.min.css？）

如何使Bootstrap Radio Buttons在被选中后变暗

1 个答案: