Question

您好我在bootstrap中使用以下半径按钮，但是想要修改以显示收音机复选框以及第二个按钮在右侧显示border-radius，在第3个按钮在左侧显示。现在，第一个在左上角和左下角有边框半径，第四个在右上角和右下角有。

<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

按钮组上的边界半径跨越两行

1 个答案: