html - 引导标签周围的复选框和输入

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>

这是演示。

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