Html 内联表单中的 Bootstrap 全角文本输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22774780/
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 full-width text-input within inline-form
提问by Killnine
I am struggling to create a textbox that fits the entire width of my containerarea.
我正在努力创建一个适合我的容器区域的整个宽度的文本框。
<div class="row">
<div class="col-md-12">
<form class="form-inline" role="form">
<input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
<button type="submit" class="btn btn-lg">Search</button>
</form>
</div>
</div>
When I do the above, the two form elements are in-line, as I expect, but don't take up more than a few columns, at best. Hovering over the col-md-12div in firebug shows it taking up the expected full width. It's just the text input that doesn't seem to fill. I even tried adding an in-line width value but it didn't change anything. I know this should be simple, just feeling really dumb now.
当我执行上述操作时，两个表单元素是内联的，正如我所期望的，但最多只占用几列。将鼠标悬停col-md-12在 firebug 中的div 上会显示它占据了预期的全宽。只是文本输入似乎没有填充。我什至尝试添加一个行内宽度值，但它没有改变任何东西。我知道这应该很简单，只是现在感觉很愚蠢。
Here is a fiddle: http://jsfiddle.net/52VtD/4119/embedded/result/
这是一个小提琴：http: //jsfiddle.net/52VtD/4119/embedded/result/
EDIT:
编辑：
The selected answer is thorough in every way and a wonderful help. It's what I ended up using. HoweverI think my initial issue was actually a problem with the default MVC5 template within Visual Studio 2013. It contained this in Site.css:
所选的答案在各方面都很周到，并且提供了极好的帮助。这是我最终使用的。但是我认为我最初的问题实际上是 Visual Studio 2013 中默认 MVC5 模板的问题。它包含在 Site.css 中：
input,
select,
textarea {
max-width: 280px;
}
Obviously that was blocking the text-input from expanding appropriately... Fair warning to future ASP.NET template users...
显然，这阻止了文本输入的适当扩展......对未来的 ASP.NET 模板用户的公平警告......
采纳答案by morten.c
The bootstrap docs says about this:
bootstrap 文档对此进行了说明：
Requires custom widths Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.
需要自定义宽度 Bootstrap 中的输入、选择和文本区域默认为 100% 宽。要使用内联表单，您必须在其中使用的表单控件上设置宽度。
The default width of 100% as all form elements gets when they got the class form-controldidn't apply if you use the form-inlineclass on your form.
form-control如果您form-inline在表单上使用该类，则所有表单元素在获得该类时获得的默认宽度 100%不适用。
You could take a look at the bootstrap.css (or .less, whatever you prefer) where you will find this part:
您可以查看 bootstrap.css（或 .less，无论您喜欢什么），您会在其中找到这部分：
.form-inline {
// Kick in the inline
@media (min-width: @screen-sm-min) {
// Inline-block all the things for "inline"
.form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
// In navbar-form, allow folks to *not* use `.form-group`
.form-control {
display: inline-block;
width: auto; // Prevent labels from stacking above inputs in `.form-group`
vertical-align: middle;
}
// Input groups need that 100% width though
.input-group > .form-control {
width: 100%;
}
[...]
}
}
Maybe you should take a look at input-groups, since I guess they have exactly the markup you want to use (working fiddle here):
也许你应该看看input-groups，因为我猜他们有你想要使用的标记（在这里工作）：
<div class="row">
<div class="col-lg-12">
<div class="input-group input-group-lg">
<input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
<span class="input-group-btn">
<button class="btn btn-default btn-lg" type="submit">Search</button>
</span>
</div>
</div>
</div>
回答by haxxxton
have a look at something like this:
看看这样的事情：
<form role="form">
<div class="row">
<div class="col-xs-12">
<div class="input-group input-group-lg">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="submit" class="btn">Search</button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-xs-12 -->
</div><!-- /.row -->
</form>
回答by kurdtpage
As stated in a similar question, try removing instances of the input-groupclass and see if that helps.
正如在一个类似的问题中所述，尝试删除input-group类的实例，看看是否有帮助。
refering to bootstrap:
指的是引导程序：
Individual form controls automatically receive some global styling. All textual , , and elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
单个表单控件会自动接收一些全局样式。所有带有 .form-control 的 textual 、 和 元素都设置为 width: 100% ；默认情况下。将标签和控件包裹在 .form-group 中以获得最佳间距。
回答by Naveed Khan
Try something like below to achieve your desired result
尝试像下面这样的东西来达到你想要的结果
input {
max-width: 100%;
}
回答by John M
With Bootstrap >4.1 it's just a case of using the flexbox utility classes. Just have a flexbox container inside your column, and then give all the elements within it the "flex-fill" class. As with inline forms you'll need to set the margins/padding on the elements yourself.
Bootstrap >4.1 只是使用 flexbox 实用程序类的一个例子。只需在您的列中放置一个 flexbox 容器，然后将其中的所有元素都指定为“flex-fill”类。与内联表单一样，您需要自己设置元素的边距/填充。
.prop-label {
margin: .25rem 0 !important;
}
.prop-field {
margin-left: 1rem;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-12">
<div class="d-flex">
<label class="flex-fill prop-label">Label:</label>
<input type="text" class="flex-fill form-control prop-field">
</div>
</div>
</div>