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

Question

我的 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 中做到这一点？将单选按钮包装在一个与顶部和底部尺寸匹配的盒子中也会很棒。

Answer 1

在下面的演示中，您将看到图标完美对齐。 请检查您的代码以删除可能影响布局的其他 css。

如果以防万一，您无法删除额外的 css。

使用 display:flex 然后 align-items: center || #gender-field 的 input-group

上的基线

希望这会有所帮助。

#gender_field .input-group > label:first-child{
  padding: 0 30px 0 60px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



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

Answer 2

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>