我正在努力创建一个适合整个容器区域宽度的文本框。
<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模板用户发出公平的警告...
发布于 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>
发布于 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>
发布于 2015-10-15 15:30:54
正如a similar question中所述,尝试删除input-group
类的实例,看看这是否有帮助。
参考bootstrap:
各个表单控件会自动接收一些全局样式。默认情况下,所有带有.form-control的文本、和元素都设置为width: 100%;。在.form-group中对标签和控件进行换行以获得最佳间距。
https://stackoverflow.com/questions/22774780
复制相似问题