Радио кнопки выглядят как кнопки

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

Эта скрипта также содержит то же решение, что и приведенный выше фрагмент, но с использованием хелпера @Html.RadioButtonFor() вместо жестко заданного входного значения.