首页 文章

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

提问于
浏览
0

您好我在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;

}

1 回答

  • 0

    只需将按钮组分成两半:

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

    Demo

相关问题