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>

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

2 个答案: