html - 跨越两行的按钮组上的边框半径

Question

你好，我在 bootstrap 中使用了以下半径按钮，但我想修改以显示单选复选框，以及第二个按钮在右侧具有 border-radius，第三个按钮在左侧。现在第一个在左上角和左下角有边界半径，第四个在右上角和右下角。

<div class="btn-group lx-toggle-big col-sm-12 col-xs-12" data-toggle="buttons">                 
    <label class="btn active col-xs-6" for="option-0">
        <input type="radio" name="options" id="option1" autocomplete="off"> Option 1
    </label>
    <label class="btn col-xs-6" for="option-1">
        <input type="radio" name="options" id="option2" autocomplete="off"> Option 2
    </label>                
    <label class="btn col-xs-6" for="option-3">
        <input type="radio" name="options" id="option3" autocomplete="off"> Option 1
    </label>
    <label class="btn col-xs-6" for="option-4">
        <input type="radio" name="options" id="option4" autocomplete="off"> Option 2
    </label>    
</div>

CSS:

.lx-toggle-big > .btn {
  border: 1px solid #00a0dd;
  border-radius: 6px;
  padding:25px 0px 25px 50px;
}
.lx-toggle-big > .btn.active,
.lx-toggle-big > .btn:active {
  background: #f5f7fa;

}

Answer 1

只需将您的按钮组分成​​两半:

</div>
<div class="btn-group lx-toggle-big col-sm-12 col-xs-12" data-toggle="buttons">

Demo