单选按钮看起来像按钮

Question

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

这是当前的样子：

这就是我需要它们看起来像的东西

我需要将此样式应用于整个项目中的所有单选按钮。这是它们的创建方式：

-itsoffset

CSS：

    <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>

我可以采用某些样式吗？或者可以做些其他选择？

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()助手而不是硬编码的输入值。