Html Bootstrap 响应式输入表单字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21036036/
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
Bootstrap responsive input form fields
提问by TimNguyenBSM
I am using .input-lg to make the form fields large. My expectation is that when the viewport shrinks (less than 768px by bootstrap default), that the form fields would become smaller and take on the normal settings, but they are not. Any ideas? Does bootstrap handle this scenario?
我正在使用 .input-lg 使表单字段变大。我的期望是，当视口缩小（引导默认小于 768 像素）时，表单字段会变小并采用正常设置，但事实并非如此。有任何想法吗？bootstrap 是否处理这种情况？
UPDATE:
更新：
HTML
HTML
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="searchZipcode">Zipcode</label>
<input type="text" class="form-control input-lg input-search" id="searchZipcode" placeholder="Zipcode of home?">
</div>
</form>
回答by Bart Calixto
I think you must put your input within a div. the input-xx class is not, lets say, responsive :D
我认为你必须把你的输入放在一个 div 中。input-xx 类不是，可以说，响应：D
<div class="col-xx-xx"> // change xx-xx to some accepted value like sm-4, md-10, whatever it fits you.
<input class="input-lg">
</div>
回答by TimNguyenBSM
Bootstrap cannot handle this scenario. Thanks everyone for the comments and answers.
Bootstrap 无法处理这种情况。感谢大家的评论和回答。
回答by Peter Smartt
I usually prefer to use a contenteditable div for that reason. You can apply the bootstrap classes to make the width responsive. You can give it a border if you want to, to make it look like an input. Use textContent instead of value to access the data, and use the focusout event instead of the change event.
出于这个原因，我通常更喜欢使用 contenteditable div。您可以应用引导程序类来使宽度响应。如果你愿意，你可以给它一个边框，让它看起来像一个输入。使用 textContent 而不是 value 来访问数据，并使用 focusout 事件而不是 change 事件。
回答by Victor Ionescu
I've encountered this problem, too. I've fixed it by adding
我也遇到过这个问题。我已经通过添加修复它
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
in the head section of the html. Be careful, though, because this would also disable zooming.
在 html 的 head 部分。不过要小心，因为这也会禁用缩放。
