Bootstrap 输入的父容器的完美 100% 宽度？答案

【问题标题】：Perfect 100% width of parent container for a Bootstrap input?Bootstrap 输入的父容器的完美 100% 宽度？
【发布时间】：2012-06-29 06:20:06
【问题描述】：

如何使 Bootstrap 输入字段的宽度与其父字段一样宽 100%？

正如 steve-obrien 在Bootstrap Issue #1058 中所写：

直接应用于输入字段时，设置为 100% 不起作用，因为它没有考虑填充。所以你最终会得到 100% 的容器加上输入框上的填充，所以输入框通常会在其容器之外中断。

这张票提供了各种解决方案，但我正在寻找最好的方法——最好是 Bootstrap 已经提供的 CSS 类。

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

应用input-block-level 类对我来说效果很好，适用于各种屏幕宽度。由Bootstrap in mixins.less定义如下：

// Block level inputs
.input-block-level {
  display: block;
  width: 100%;
  min-height: 28px;        // Make inputs at least the height of their button counterpart
  .box-sizing(border-box); // Makes inputs behave like true block-level elements
}

这与his comment on issue #1058中的'assembler'建议的风格非常相似。

【讨论】：

对于 Bootstrap 3，使用form-control，它添加了width: 100%
在 BS 3 中，有一个覆盖 max-width:280px 的输入覆盖 form-control 类。实际上，没关系，这是来自 Microsoft 在新 ASP.NET 项目中包含的默认 Site.css。嘘！
@Finster 嘘，确实。
@Finster OMG，非常感谢 Fin！为什么我的输入范围没有增长，这让我发疯了。愚蠢的微软... GRRR!!!
我遇到了完全相同的问题，并从 site.css 中删除了该设置。现在看看还有什么问题。 CSS 仍然是意大利面条：/

【解决方案2】：

只需添加 box-sizing：

input[type="text"] {
    box-sizing: border-box;
}

【讨论】：

输入[type=text] { 宽度：100%; box-sizing：边框框；高度：28px； } 为我工作
{ width: 100%; box-sizing: border-box; } 为我工作。

【解决方案3】：

如果您使用 C# ASP.NET MVC 的默认模板，您可能会发现 site.css 覆盖了一些引导程序样式。如果你想像我一样使用 Bootstrap，让 M$ 覆盖它（在你不知情的情况下）可能会让人非常沮丧！随意删除任何不需要的样式...

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

【讨论】：

【解决方案4】：

对于任何在谷歌上搜索的人，一个建议是删除所有 input-group 类实例。在类似的情况下为我工作。原始代码：

<form>
  <div class="bs-callout">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" name="time" placeholder="Time">
          </div>
        </div>
      </div>
      <div class="col-md-8">
        <div class="form-group">
          <div class="input-group">
            <select name="dtarea" class="form-control">
              <option value="1">Option value 1</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="input-group">
        <input type="text" name="reason" class="form-control" placeholder="Reason">
      </div>
    </div>
  </div>
</form>

新代码：

<form>
  <div class="bs-callout">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group">
          <input type="text" class="form-control" name="time" placeholder="Time">
        </div>
      </div>
      <div class="col-md-8">
        <div class="form-group">
          <select name="dtarea" class="form-control">
            <option value="1">Option value 1</option>
          </select>
        </div>
      </div>
    </div>
    <div class="row">
      <input type="text" name="reason" class="form-control" placeholder="Reason">
    </div>
  </div>
</form>

【讨论】：

【解决方案5】：

我找到了适合我的解决方案：

<input class="form-control" style="min-width: 100%!important;" type="text" />

您只需要覆盖 min-width 设置 100% 和 important ，结果就是这个：

如果你不应用它，你总是会得到这个：

【讨论】：

【解决方案6】：

为了得到想要的结果，你必须设置“box-sizing:border-box”而不是默认的“box-sizing:content-box”。这正是您所指的问题（来自 MDN）：

内容框

这是 CSS 标准指定的初始值和默认值。测量宽度和高度属性仅包括内容，但不包括填充、边框或边距。

边框

宽度和高度属性包括内容、内边距和边框，但不包括边距。"

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

这个 CSS 的兼容性很好。

【讨论】：

【解决方案7】：

使用.container-fluid，如果你想全宽作为父级，跨越你的视口的整个宽度。

【讨论】：

【解决方案8】：

怎么样？

    input[type="text"] {
          max-width:none;
   }

检查某些 css 文件是否导致问题。默认情况下，引导程序显示在整个宽度上。比如在 MVC 目录中 Content 是 site.css 并且有一个定义限制宽度。

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

【讨论】：

【解决方案9】：

只需添加：

width: 100% !important;

【讨论】：