jquery - 如何水平对齐 bootstrap 3 radio 和 radio 的标签？

Question

<form class="form-horizontal">
  <label class="control-label in-line">Lover gender</label>
  <label class="radio-inline">
    <input type="radio" value="option1"> Male
  </label>
  <label class="radio-inline">
    <input type="radio" value="option2"> Female      </label>                       
</form>

请同时解释你的答案。

Answer 1

您需要使用 <form class="form-inline">对于内联表单:

http://getbootstrap.com/css/#forms-inline

还有内联 radio 的辅助类:

http://getbootstrap.com/css/#checkboxes-and-radios

这是一个关于 Bootply 的示例，它显示了您正在尝试执行的操作:

http://www.bootply.com/BCSk79TPOS

使用的代码是:

<form class="form-inline">
  <div class="radio-inline">
    <label for="option1">
      <input type="radio" id="option1"> Option 1
    </label>
  </div>
  <div class="radio-inline">
    <label for="option2">
      <input type="radio" id="option2"> Option 2
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>