Bootstrap全宽文本- inline-form中的输入
我正在努力创建一个适合整个容器区域宽度的文本框。
<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>在执行上述操作时，正如我所预期的那样，两个表单元素是内联的，但最多只能占用几列。将鼠标悬停在firebug中的col-md-12 div上可以看到它占据了预期的全宽。这只是文本输入似乎没有填满。我甚至尝试添加一个内联宽度值，但它没有改变任何东西。我知道这应该很简单，只是现在感觉真的很傻。
这里有一个小提琴：http://jsfiddle.net/52VtD/4119/embedded/result/
编辑：
这就是我最终使用的。然而，我认为我最初的问题实际上是Visual Studio2013中的默认MVC5模板的问题。它在Site.css中包含了以下内容：
input,
select,
textarea {
max-width: 280px;
}对未来的ASP.NET模板用户发出公平的警告...
回答 7
Stack Overflow用户
发布于 2014-04-01 08:49:48
引导程序文档says about this
要求自定义宽度输入、选择和文本区域在Bootstrap中默认为100%宽。要使用内联表单，必须在其中使用的表单控件上设置宽度。
如果您在表单上使用form-inline类，则所有表单元素在获取类form-control时的默认宽度100%都不适用。
您可以查看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%;
}
[...]
}
}也许你应该看看input-groups，因为我猜他们正好有你想要使用的标记(working fiddle here)：
<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>Stack Overflow用户
发布于 2014-04-01 08:56:05
看看下面这样的东西：
<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>Stack Overflow用户
发布于 2015-10-15 15:30:54
正如a similar question中所述，尝试删除input-group类的实例，看看这是否有帮助。
参考bootstrap：
各个表单控件会自动接收一些全局样式。默认情况下，所有带有.form-control的文本、和元素都设置为width: 100%；。在.form-group中对标签和控件进行换行以获得最佳间距。
https://stackoverflow.com/questions/22774780
复制相似问题