css - 单选按钮看起来像按钮

Question

我是 MVC Razor 的新手，需要更改单选按钮列表的显示方式。目前所有选项都在一起(它们之间没有空格)，但我需要将它们显示为看起来像按钮。我如何“分离”它们以使其看起来像按钮并充当单选按钮列表？

这是它目前的样子:

这就是我需要它们的样子:

我需要将此样式应用于整个元素中的所有单选按钮。以下是它们的创建方式:

    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div data-toggle="buttons" class="btn-group">
                                <label class="btn btn-radio">
                                    @Html.RadioButtonFor(m => m.Address.RiskIsResidence, "Yes", new { name = "radIsResidence" }) Yes
                                </label>

                                <label class="btn btn-radio">
                                    @Html.RadioButtonFor(m => m.Address.RiskIsResidence, "No", new { name = "radIsResidence" }) No
                                </label>
                            </div>
                        </div>

CSS:

    .btn-radio {
/*border-radius: 30px;*/
border: 1px solid #dcdcdc;
cursor: pointer;
display: inline-block;
font-weight: 400;
/* padding: .75em 1em; */
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
min-width: 110px;
font-size: 14px;
letter-spacing: 2px;
line-height: 30px;
height: 50px;
text-align: center;
text-transform: none;
}

.btn-radio:hover {
    border: 1px solid #1e73e9 !important;
}

是否有一些我可以应用的样式，或者有什么替代方案可以做到这一点？

Answer 1

问题似乎来自这个 div 元素，它有 btn-group 类:

<div data-toggle="buttons" class="btn-group">

如 Bootstrap 4 documentation 中所述, btn-group 用于对多个按钮进行分组，使它们看起来像是在一系列按钮中。如果您希望单选按钮之间的间隙较小，则只需删除 btn-group 类，如下面的代码片段所示:

$(function () {
    $('label').click(function () {
        $(this).addClass('btn-primary').siblings().removeClass('btn-primary');
    });
});

.btn-radio {
    border: 1px solid #dcdcdc;
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    min-width: 110px;
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 30px;
    height: 50px;
    text-align: center;
    text-transform: none;
}

.btn-radio:hover {
    border: 1px solid #1e73e9 !important;
}


input[type="radio"] {
  display: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div data-toggle="buttons">
         <label class="btn btn-radio">
             <input id="RiskIsResidence" name="RiskIsResidence" type="radio" value="Yes"> Yes
         </label>
         <label class="btn btn-radio btn-primary">
             <input checked="checked" id="RiskIsResidence" name="RiskIsResidence" type="radio" value="No"> No
         </label>
    </div>
</div>

This fiddle还包含与上述代码段相同的解决方案，但使用 @Html.RadioButtonFor() 帮助程序而不是硬编码输入值。