Bootstrap 3.x: Как выровнять по горизонтали, равномерно распределенные радиокнопки?

Question

My 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

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

Answer 2

В демоверсии ниже вы увидите, что иконки выровнены идеально. Пожалуйста, проверьте ваш код, чтобы удалить дополнительные CSS, которые могут повлиять на макет.

В этом случае вы не можете удалить дополнительные CSS.

Использовать display: flex и затем выровнять элементы: center || базовая линия по # полу группа ввода

Надеюсь, это поможет.

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