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>

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

我甚至尝试在每组单选按钮周围放置一个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的{{1}}现在为100％，可按div和col-sm-6分配50:50

内联单选按钮引导标签

1 个答案: