Html Bootstrap 标签周围的复选框和输入

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15857660/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 07:17:56  来源:igfitidea点击:

Bootstrap Label Surrounding Checkbox and Input

htmlcsstwitter-bootstrap

提问by crunkchitis

I'm making a form that has a checkbox that is inline with a text input. Here's what I did to make it look nice with bootstrap:

我正在制作一个带有与文本输入内联的复选框的表单。这是我用 bootstrap 让它看起来不错的方法:

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

It looks good, but it doesn't function well. In firefox, the user can't type in the textbox. Is there a good bootstrap way to put the checkbox and the text input inline with each other?

它看起来不错,但它的功能并不好。在 Firefox 中,用户无法在文本框中输入。是否有一种很好的引导方法可以将复选框和文本输入相互内联?

回答by Miljan Puzovi?

Don't put two inputelements inside one labelelement.

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

And here is Twitter Bootstrap way to solve this:

这是解决此问题的 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>

Here is DEMO.

这是演示

Look more examples from official documentation.

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