单选按钮看起来像按钮

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 类，如下面的 sn-p 所示：

$(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 也包含与上面的 sn-p 相同的解决方案，但使用 @Html.RadioButtonFor() 帮助器而不是硬编码的输入值。