引导内联表单中的全宽文本输入

我正在努力创建一个文本框，适合我的 集装箱区域的整个宽度。

<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/

编辑:

所选择的答案是彻底的，在每一个方面和一个奇妙的帮助。我最后用的就是这个。我认为我最初的问题实际上是 VisualStudio2013中默认 MVC5模板的问题。它包含在 Site.css 中:

input,
select,
textarea {
max-width: 280px;
}

显然，这阻碍了文本输入的适当扩展... 公平警告未来的 ASP.NET 模板用户..。

270065 次浏览
小开
最佳答案

引导程序记录 说这个:

需要自定义宽度输入、选择和文本区域的宽度为100% 要使用内联表单，您必须设置一个 内使用的窗体控件的宽度。

当所有表单元素获得类 form-control时，默认宽度为100% ，如果在表单上使用 form-inline类，则不适用这个默认宽度。

你可以看看 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%;
}


[...]
}
}

也许你应该看看 投入组别，因为我猜他们正好有你想要使用的标记(工作小提琴 给你) :

<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>
小开

看看这样的东西:

<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>

Http://jsfiddle.net/n6c7v/1/

小开

如 一个类似的问题所述，尝试删除 input-group类的实例，看看是否有帮助。

指的是 bootstrap:

单个窗体控件自动接收一些全局样式。 所有文本元素，以及具有 。窗体控件设置为宽度: 100% ; 默认情况下 最佳间距的形式组控制。

小开

尝试下面的方法来达到你想要的效果

input {
max-width: 100%;
}
小开

对于 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>

小开

我知道这个问题已经很老了，但是我最近偶然发现了它，找到了一个我更喜欢的解决方案，我想我可以和大家分享一下。

现在 Bootstrap 5已经可用了，有一种新的方法可以类似于使用 input-group，但是看起来更像一个普通的表单，没有任何 CSS 调整:

<div class="row g-3 align-items-center">
<div class="col-auto">
<label>Label:</label>
</div>
<div class="col">
<input class="form-control">
</div>
<div class="col-auto">
<button type="button" class="btn btn-primary">Button</button>
</div>
</div>

col-auto类使这些列适合它们的内容(在本例中是标签和按钮) ，任何带有 col类的列都应该均匀分布以占用剩余的空间。

小开

可以对 input使用 flex-fill类

<div class="row">
<div class="col-md-12">
<form class="form-inline" role="form">
<input type="text" class="form-control input-lg flex-fill" id="search-church" placeholder="Your location (City, State, ZIP)">
<button type="submit" class="btn btn-lg">Search</button>
</form>
</div>

提交答案