内联单选按钮引导程序的标签

Question

当我突然在每个字段上方添加标签时,我在注册页面镀金:

它工作正常,但没有单选按钮.我依赖于Bootstrap 3而且我认为这可以在没有额外CSS的情况下解决,但只需要正确嵌套Bootstrap类.对？

<form class="form-horizontal">
<div class="form-group">
      <div class="col-sm-3">
           <label for="input-password">Password:</label>
           <input name="password" type="password" class="form-control" id="input-password" placeholder="Password" required="required" />
      </div>
      <div class="col-sm-3">
           <label for="input-confirm-password">Confirm Password:</label>
           <input name="confirm_password" id="input-confirm-password" type="password" class="form-control" placeholder="Confirm Password" required="required" />
      </div>
      </div>
 <div class="form-group">
      <div class="col-sm-6">
            <label for="input-address">Address:</label>
            <input name="address" id="input-address" type="text" class="form-control" placeholder="Address" />
       </div>
  </div>
  <label class="row">Gender:</label>
  <div class="form-group"> 
       <div class="col-sm-3">
            <label class="radio-inline">
                 <input name="gender" id="input-gender-male" value="Male" type="radio" />Male
             </label>
        </div>
        <div class="col-sm-3">
             <label class="radio-inline">
                  <input name="gender" id="input-gender-female" value="Female" type="radio" />Female
             </label>
         </div>
   </div>
   <div class="form-group">
         <label>Account Type:</label>
         <div class="col-sm-3">
                 <label class="radio-inline">
                      <input name="account_type" id="input-type-student" value="Student" type="radio" />Student
                  </label>
          </div>
          <div class="col-sm-3">
          <label class="radio-inline">
                <input name="account_type" id="input-type-tutor" value="Tutor" type="radio" />Tutor
          </label>
     </div>
</div>
</form>

我尝试了2个不同的元素放置来解决这个问题,你可以看到,但它没有用.

我甚至试着div在每一组单选按钮周围放一个然后给label它一个但它也不起作用.

Answer 1

你可以这样做:

<div class="form-group">
    <div class="col-sm-6">
        <label for="input-type">Account Type *:</label>
        <div id="input-type" class="row">
            <div class="col-sm-6">
                <label class="radio-inline">
                    <input name="account_type" id="input-type-student" value="Student" type="radio" />Student
                </label>
            </div>
            <div class="col-sm-6">
                <label class="radio-inline">
                    <input name="account_type" id="input-type-tutor" value="Tutor" type="radio" />Tutor
                </label>
            </div>
        </div
    </div>
</div>

对其他单选按钮组执行相同操作.

说明:col-sm-6外部的外部div现在是100%,可以用col-sm-6和分为50:50col-sm-6