引导文档对此进行了说明：
需要自定义宽度默认情况下，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 > <div > <div > <input type="text" id="search-church" placeholder="Your location (City, State, ZIP)"> <span > <button type="submit">Search</button> </span> </div> </div></div>
