html - 内联表单中的 Bootstrap 全 Angular 文本输入

Question

我正在努力创建一个适合我的容器区域整个宽度的文本框。

<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 上会显示它占据了预期的全宽。这只是似乎没有填写的文本输入。我什至尝试添加一个在线宽度值，但它没有改变任何东西。我知道这应该很简单，只是现在感觉真的很蠢。

这是一个 fiddle :http://jsfiddle.net/52VtD/4119/embedded/result/

编辑:

所选答案在各个方面都很详尽，是一个很好的帮助。这是我最终使用的。 但是我认为我最初的问题实际上是 Visual Studio 2013 中默认 MVC5 模板的问题。它包含在 Site.css 中:

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

显然，这阻止了文本输入的适当扩展……对 future 的 ASP.NET 模板用户的公平警告……

Answer 1

引导文档 says about this :

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.

当所有表单元素在获得类 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%;
    }

    [...]
  }
}

也许你应该看看input-groups ，因为我猜他们有你想要使用的标记(工作 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>