以行内forms引导全宽文本input
我正在努力创build一个适合我的容器区域的整个宽度的文本框。
<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> 当我这样做的时候，这两个表单元素就像我所期望的那样是内联的，但是最好不要超过几列。 将鼠标hover在萤火虫的col-md-12 div上显示它占用了预期的全宽。 这只是文字input，似乎并没有填补。 我甚至尝试添加一个内联宽度值，但它没有改变任何东西。 我知道这应该是简单的，只是现在感觉真的很愚蠢。
这是一个小提琴： http : //jsfiddle.net/52VtD/4119/embedded/result/
编辑：
所选的答案在每个方面都是彻底的，是一个很好的帮助。 这就是我最终使用的。 不过，我认为我最初的问题实际上是Visual Studio 2013中的默认MVC5模板的一个问题。它包含在Site.css中：
input, select, textarea { max-width: 280px; }
显然，这是阻止文本input适当扩大…公平的警告未来的ASP.NET模板用户…
引导文档说这个 ：
需要自定义宽度默认情况下，Bootstrap中的input，select和textareas都是100％宽度。 要使用内联表单，您必须在内部使用的表单控件上设置宽度。
如果在form-inline上使用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组 ，因为我猜他们有你想要使用的标记（在这里工作的小提琴）：
<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>
正如类似的问题所述 ，尝试删除input-group类的实例，看看是否有帮助。
引用自举：
单独的窗体控件自动获得一些全局样式。 所有带有.form-control的文本，和元素都设置为宽度：100％; 默认。 将标签和控件包裹在.form-group中以获得最佳间距。
