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 。

从official documentation了解更多示例。