使用bootstrap将单选按钮组与复选框组合在一起

Question

我正在尝试使用bootstrap在右侧创建一个带有复选框的单选按钮组，如下图所示。

以下是一些无法创建结果的代码。具体来说，复选框是向右浮动的，B右边的边框是四舍五入的。

<div style="margin: 40px 40px 40px 40px"class="input-group">
    <div class="btn-group" data-toggle="buttons">

        <label class="btn btn-default"> 
          <input type="radio" name="options" id="A">
            A
        </label>

        <label class="btn btn-default"> 
          <input type="radio" name="options" id="B">
            B
        </label>

    </div>

    <span class="input-group-addon">
          <input type="checkbox">
    </span>
</div>

http://jsfiddle.net/waspinator/Br3k9/3/

Answer 1

将右侧复选框类添加到复选框，将中间按钮类添加到中间按钮

http://jsfiddle.net/waspinator/Br3k9/15/

.right-chkbox{
    width: 0px;
}

.mid-button{
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}