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

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

编辑：

选择的答案在各方面都是彻底的，并提供了很好的帮助。这就是我最终使用的东西。然而我认为我的初始问题实际上是Visual Studio 2013中默认MVC5模板的问题。它包含在Site.css中：

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

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

Answer 1

引导程序文档says about this：

需要自定义宽度输入，选择和textareas是100％宽默认在Bootstrap中。要使用内联表单，您必须设置一个在其中使用的表单控件上的宽度。

如果您在表单上使用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，因为我猜他们确实有你想要使用的标记（工作小提琴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>

Answer 2

看看这样的事情：

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

Answer 3

如a similar question中所述，请尝试删除input-group类的实例，看看是否有帮助。

参考bootstrap：

单个表单控件自动接收一些全局样式。所有textual，和元素 .form-control设置为width：100％;默认情况下。包裹标签和控制.form-group以获得最佳间距。

Answer 4

尝试以下类似方法以达到您想要的效果

input {
    max-width: 100%;
}

Answer 5

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

Answer 6

我知道这个问题已经很老了，但我最近偶然发现了它，找到了一个我更喜欢的解决方案，并认为我会分享它。

现在 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 类的东西都应该均匀分布以占用剩余空间。

内联形式的Bootstrap全角文本输入

6 个答案: