如何获得与引导程序内联的标签和单选按钮？

Question

I know this should be simple, but the solution eludes me. My test-site illustrates my frustration.

<div class="form-group row">
    <label for="choose-type" class="col-sm-2 form-control-label label-inline">Account Type</label>
    <div id="choose-type" class="col-sm-10 div-inline">
        <label class="radio-inline">
            <input type="radio" class="radio-inline" name="user-type" id="writer" value="1" required > Writer
        </label>
        <label class="radio-inline">
            <input type="radio" class="radio-inline" name="user-type" id="enabler" value="2" required> Enabler
        </label>
    </div>
</div>

Answer 1

Please try this. You have padding in the divs which is throwing your bootstrap layout off (col-sm-10 and col-sm-2 don't have enough space). I have changed col-sm-10 to col-sm-8 to accommodate.

<div class="form-group row">
    <label for="choose-type" class="col-sm-2 form-control-label label-inline">Account Type</label>
    <div id="choose-type" class="col-sm-8 div-inline">
        <label class="radio-inline">
            <input type="radio" class="radio-inline" name="user-type" id="writer" value="1" required=""> Writer
        </label>
        <label class="radio-inline">
            <input type="radio" class="radio-inline" name="user-type" id="enabler" value="2" required=""> Enabler
        </label>
    </div>
</div>

Answer 2

I'm guessing you're talking about the height difference between the text and the radio-button. Remove the second radio-inline from the <input> elements, the radio-inline from the <label> is sufficient.

<div class="form-group row">
    <label for="choose-type" class="col-sm-2 form-control-label label-inline">Account Type</label>
    <div id="choose-type" class="col-sm-10 div-inline">
        <label class="radio-inline">
            <input type="radio" class="" name="user-type" id="writer" value="1" required > Writer
        </label>
        <label class="radio-inline">
            <input type="radio" class="" name="user-type" id="enabler" value="2" required> Enabler
        </label>
    </div>
</div>