Question

我知道这应该很简单，但解决方案不包括在内。我的test-site说明了我的沮丧。

<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

请试试这个。你在div中填充了你的引导布局（col-sm-10和col-sm-2没有足够的空间）。我已将col-sm-10更改为col-sm-8以适应。

<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

我猜你在谈论文本和单选按钮之间的高度差异。从radio-inline元素中删除第二个<input>，radio-inline中的<label>就足够了。

<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>

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

2 个答案: