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/

但是，我的单选按钮标签现在没有与标签标签一起使用。

我尝试了多种方法并摆弄了边距，填充和线条高度，但我似乎无法使它工作，无线电标签不会让步＃/ p>

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

Answer 2

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

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

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

用水平形式的收音机对齐文本

3 个答案: