Bootstrap标签环绕复选框和输入

Question

我正在创建一个具有与文本输入内联的复选框的表单.这是我用bootstrap让它看起来很漂亮的方法:

<label class="checkbox">
  <input type="checkbox" name="keywords" value="__option__">
  <input type="text" name="keywords_other_option" value="" placeholder="Other">
</label>

它看起来不错,但效果不好.在Firefox中,用户无法输入文本框.是否有一个很好的引导方式来将复选框和文本输入相互内联？

Answer 1

不要将两个input元素放在一个label元素中.

这里是Twitter Bootstrap解决这个问题的方法:

<form class="form-inline">
  <label class="checkbox">
     <input type="checkbox" name="keywords" value="__option__">
  </label>
  <input type="text" name="keywords_other_option" value="" placeholder="Other">
</form>

这是DEMO.

从官方文档中查看更多示例.