Bootstrap 内联单选按钮引导的标签

kcwpcxri  于 2023-04-18  发布在  Bootstrap
关注(0)|答案(1)|浏览(146)

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

它工作得很好,但不是单选按钮。我依靠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,但这也不起作用。

brgchamk

brgchamk1#

你可以这样做:

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

对其他单选按钮组执行相同的操作。
说明:外部divcol-sm-6现在是100%,可以50:50除以col-sm-6col-sm-6

相关问题