css - 以水平形式将文本与单选对齐

Question

我在 bootstrap 3 中有一个水平表单，我想让我的单选按钮在我的页面上变大，因为我认为它们的原始尺寸太小了。

所以我有这段代码:

<div class="form-group">
    <label class="col-xs-4 control-label">myfield</label>
    <div class="col-xs-8" style="padding-top: 9px;">
        <label>
            <input type="radio" name="inpPrjMp" value="1" />
            val1
        </label>
        <br />
        <label>
            <input type="radio" name="inpPrjMp" value="2" />
            val2
        </label>
    </div>
</div>

情况:https://jsfiddle.net/7c2bv2mz/2/

但是，我的单选按钮标签现在没有与部分标签对齐。

我尝试了很多东西并摆弄了边距、填充和行高，但我似乎无法让它工作，单选标签不会让步

Answer 1

看看我编辑的 fiddle 。

https://jsfiddle.net/p19wcspj/

<div class="container">
<div class="navbar navbar-default">
    <div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3</a>

    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="http://getbootstrap.com/customize">Customize</a>

            </li>
        </ul>
    </div>
</div>
<div class="col-xs-12">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-xs-4 control-label">myfield</label>
            <div class="col-xs-8" style="padding-top: 9px;">
                <input type="text" class="form-control"/>
            </div>
        </div>
    </form>
</div>
<div class="col-xs-12">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-xs-4 control-label">myfield</label>
            <div class="col-xs-8" style="padding-top: 9px;">
                <input type="radio" name="inpPrjMp" value="1" />
                <label class="radio-label">
                    val1</label>
                <br />
                <input type="radio" name="inpPrjMp" value="2" />
                <label class="radio-label">
                    val2</label>
            </div>
        </div>
    </form>
</div>

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
 @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
    margin: 10px;
}

input[type="radio"] {
    width: 25px;
    height: 38px;
    margin-top: -8px;
}

.radio-label{
    position:absolute;
}