jQuery 表单内联引导程序 3 中的输入宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23982110/
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
input width in form-inline bootstrap 3
提问by Konstantin Rusanov
I don't understand, how I can customize an input (form-control) width in Bootstrap 3?
我不明白，如何在 Bootstrap 3 中自定义输入（表单控件）宽度？
<header>
<div class="container">
<div class="row">
<form role="form" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Почтовый идентификатор" id="search">
</div>
<input type="button" class="btn btn-success" value="Найти" onclick="window.location.href = '/result/'+document.getElementById('search').value">
</form>
</div>
</div>
</header>
Can I do it without some styles (like width in pixels)?
我可以在没有某些样式的情况下（例如宽度以像素为单位）吗？
回答by jyrkim
Update(W3Schools link added):
I just spotted that there's a very good answer on this issue available at: w3schools.com/bootstrap/bootstrap_forms_sizing.asp. There are good examples on how to apply either .input-lgand .input-smfor input height or .col-lg-*and .col-sm-for input width.
更新（添加了 W3Schools 链接）：我刚刚发现在这个问题上有一个很好的答案：w3schools.com/bootstrap/bootstrap_forms_sizing.asp。有关于如何申请或者很好的例子.input-lg，并.input-sm输入高度或.col-lg-*和.col-sm-输入宽度。
Original answer: Have you tried to use Bootstrap Gridswith your Form and col-xs-.. classes for each input field that needs to be stacked on mobile device. Something like the code below (copy pasted from Bootstrap):
原始答案：您是否尝试过将 Bootstrap Grids与您的 Form 和 col-xs-.. 类一起用于需要堆叠在移动设备上的每个输入字段。类似于下面的代码（从 Bootstrap 复制粘贴）：
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
I applied those col-xs-.. classes on to your form, and got your columns stacked on a mobile device (okay I just made my browser window smaller and it worked).
我将这些 col-xs-.. 类应用到您的表单上，并将您的列堆叠在移动设备上（好吧，我只是将浏览器窗口变小了，并且可以正常工作）。
<div class="container">
<div class="row">
<form role="form" class="form-inline">
<div class="col-xs-12 col-md-2">
<div class="form-group">
<input type="text" class="form-control" placeholder="Почтовый идентификатор" id="search">
</div>
</div>
<div class="col-xs-6 col-md-1">
<input type="button" class="btn btn-success" value="Найти" onclick="window.location.href = '/result/' + document.getElementById('search').value"/>
</div>
</form>
</div>
</div>
On Desktop device I gave those fields smaller values: col-md-2 and col-md-1, but you may want to fine-tune those values the way you like it.
在桌面设备上，我给了这些字段较小的值：col-md-2 和 col-md-1，但您可能希望按照自己喜欢的方式微调这些值。
Updated:Have you thought about making your custom colors and sizes by using LESS variables for your input elements, which Bootstrap allows you to do: "Customize Less variables to define colors, sizes and more inside your custom CSS stylesheets."
更新：您是否考虑过通过为输入元素使用 LESS 变量来制作自定义颜色和大小，Bootstrap 允许您这样做：“自定义 Less 变量以在自定义 CSS 样式表中定义颜色、大小等。”
If you check the Customizepart of Bootstrap site. It allows you to customize input elements in your Form. LESS variables such as: @input-bg, @input-color, @input-height-base, @input-borderand others could be useful in your case. For instance @input-height-baseis by default .form-controlheight.
如果您检查Bootstrap 站点的自定义部分。它允许您自定义表单中的输入元素。LESS 变量，例如：@input-bg、@input-color、@input-height-base、@input-border等可能对您有用。例如@input-height-base默认是.form-control高度。
回答by Samuel Moshie
Try
尝试
.form-inline .form-group input {
width:140px;
}
For the css to manipu
对于 css 到 manipu
回答by Milind Anantwar
You can quickly size labels and form controls within a Horizontal form by adding .form-group-*to the element
您可以通过添加.form-group-*到元素来快速调整水平表单中的标签和表单控件的大小
You can also quickly size all inputs and other elements inside an .input-groupwith the .input-group-smor .input-group-lgclasses
您还可以.input-group使用.input-group-sm或.input-group-lg类快速调整所有输入和其他元素的大小
