Css 以水平形式将文本与收音机对齐

我在Bootstrap3中有一个水平的表单，我想让我的单选按钮在我的页面上变大，因为我觉得它们原来的尺寸太小了

所以我有这个代码：

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

麦菲尔德
瓦尔1


瓦尔2

情况：

但是，我的单选按钮标签现在与分区标签不对齐

---

我尝试了多种方法，并对边距、填充和线宽进行了调整，但我似乎无法使其正常工作，单选标签不会移动

在下面的课程中，您可以通过更改宽度和高度来使单选按钮变大

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

---

看看我编辑过的小提琴

---

工作非常完美，我只需将col-xs-8 div的填充顶部向下移动到7px而不是9px，广播文本就可以完美对齐像素。非常感谢^^

<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;">
                <label>
                <div style="line-height : 58px;">
                      <input type="radio" name="inpPrjMp" value="1" />
                    <div style="float:right;vertical-align:center">   
                         Val 1
                     </div>
                 </div>
                </label>
                <br />
                <label>
                   <div style="line-height : 58px;">
                      <input type="radio" name="inpPrjMp" value="2" />
                    <div style="float:right;vertical-align:center">   
                         Val 2
                     </div>
                     </div>
                </label>
            </div>
        </div>
    </form>
</div>

label input[type="radio"] {
  width: 55px;
  height: 58px;
  margin-top: 0px;
}

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