以内联形式引导全角文本输入

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>

当我执行上述操作时，正如我期望的那样，两个表单元素都是内联的，但充其量最多不会占用几列。将鼠标悬停col- md-12在firebug中的div上会显示它占用了预期的全宽。只是似乎无法填充文本输入。我什至尝试添加行内宽度值，但没有任何改变。我知道这应该很简单，只是现在感觉真傻。

这是一个小提琴：http :
//jsfiddle.net/52VtD/4119/embedded/result/

编辑：

选择的答案在各个方面都是彻底的，并且是一个很好的帮助。这就是我最终使用的。 但是， 我认为最初的问题实际上是Visual Studio
2013中默认MVC5模板的问题。它在Site.css中包含此问题：

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

显然，这阻止了文本输入的适当扩展。向未来的ASP.NET模板用户发出警告。

Answer 1

引导文档对此进行了说明：

需要自定义宽度默认情况下，Bootstrap中的输入，选择和文本区域的宽度为100％。要使用内联表单，您必须在其中使用的表单控件上设置宽度。

form-control如果form-inline在表单上使用该类，则所有表单元素在获得该类时获得的默认宽度为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，因为我猜它们正好具有您要使用的标记（在这里工作很简单）：

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