时间戳

首页 > 解决方案 > Bootstrap 3.x：如何水平对齐，均匀间隔内联单选按钮？

html - Bootstrap 3.x：如何水平对齐，均匀间隔内联单选按钮？

问题描述

我的 WebApp 生成以下代码：

<div class="form-group" id="birthDate_field">   
    <label class="control-label sr-only" for="birthDate">Birth date</label>
    <div class="input-group">
        <span class="input-group-addon"><span class="fa fa-birthday-cake"></span></span>
        <input type="date" id="birthDate" name="birthDate" value="" class="form-control form-control input-lg" placeholder="Birth date">
    </div>
</div>
<div class="form-group" id="gender_field">
    <div class="input-group">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <label class="radio-inline" for="gender_female">
            <input type="radio" id="gender_female" name="gender" value="female" required="true">
            <i class="fa fa-female"></i> Female
        </label>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <label class="radio-inline" for="gender_male">
            <input type="radio" id="gender_male" name="gender" value="male" required="true">
            <i class="fa fa-male"></i> Male
        </label>
    </div>
</div>
<div class="form-group" id="email_field">
    <label class="control-label sr-only" for="email">Email</label>
    <div class="input-group">
        <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
        <input type="email" id="email" name="email" value="" class="form-control form-control input-lg" placeholder="Email">
    </div>
</div>

这导致以下输出： 在此处输入图像描述

但是，我在那里使用空格水平对齐按钮，这是一种糟糕的方法。你如何在 Bootstrap 3.x 中做到这一点？将单选按钮包装在一个与顶部和底部尺寸相匹配的盒子中也会很棒。

标签： htmlcsstwitter-bootstraptwitter-bootstrap-3

解决方案

CSS

.gender{
   display : inline-block;
   width : 42%;
   padding : 5px;
   margin-right : 5%;
}

html

 <div class="form-group" id="birthDate_field">   
     <label class="control-label sr-only" for="birthDate">Birth date</label>
         <div class="input-group">
             <span class="input-group-addon"><span class="fa fa-birthday-cake"></span></span>
             <input type="date" id="birthDate" name="birthDate" value="" class="form-control form-control input-lg" placeholder="Birth date">
         </div>
 </div>
 <div class="form-group" id="gender_field">
     <div class="input-group">

    <span class="gender">

         <label class="radio-inline" for="gender_female">
             <input type="radio" id="gender_female" name="gender" value="female" required="true">
             <i class="fa fa-female"></i> Female
         </label>

    </span>
    <span class="gender">

         <label class="radio-inline" for="gender_male">
             <input type="radio" id="gender_male" name="gender" value="male" required="true">
             <i class="fa fa-male"></i> Male
         </label>

    </span>

     </div>
 </div>
 <div class="form-group" id="email_field">
     <label class="control-label sr-only" for="email">Email</label>
        <div class="input-group">
             <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
             <input type="email" id="email" name="email" value="" class="form-control form-control input-lg" placeholder="Email">
        </div>
 </div>

推荐阅读