以水平形式将文本与单选对齐答案

【问题标题】：Allign text with radio in horizontal form以水平形式将文本与单选对齐
【发布时间】：2015-08-02 22:35:57
【问题描述】：

我在 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/

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

我尝试了多种方法并调整了边距、填充和线高，但我似乎无法使其工作，单选标签不会让步

【问题讨论】：

标签： css twitter-bootstrap radio-button

【解决方案1】：

看看我编辑的小提琴。

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

【讨论】：

工作得很好，我只需要将 col-xs-8 div 的 padding-top 降低到 7px 而不是 9px 以使无线电文本与像素完美对齐。非常感谢！ ^^

【解决方案2】：

您可以通过在下面的类中更改宽度和高度来使您的单选按钮更大。

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

【讨论】：

【解决方案3】：

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

【讨论】：