Css 引导输入的父容器的完美100%宽度？

如何使引导输入字段与其父字段的宽度完全相同

正如steve obrien在文章中写道：

当直接应用于输入字段时，设置为100%不起作用，因为它不考虑填充。因此，您最终得到了100%的容器加上输入框上的填充，因此输入框通常在其容器外断裂

---

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

在不同的屏幕宽度上应用

输入块级别的
类对我来说非常有用。其定义如下：

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

这与中“assembler”建议的样式非常相似。
只需添加框大小：

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

只需添加：

width: 100% !important;

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


选项值1
那怎么办

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

检查某些css文件是否导致问题。默认情况下，引导显示整个宽度。例如，在MVC目录中，内容是site.css，并且有一个约束宽度的定义

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

为了获得所需的结果，必须将“框大小：边框框”与默认值“框大小：内容框”进行设置。这正是您所指的问题（来自MDN）：

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

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


参考：

此CSS的兼容性很好。
如果您使用C#ASP.NET MVC的默认模板，您可能会发现站点。CSS覆盖了一些引导样式。如果您想像我一样使用引导，请让M$覆盖它（您不知道）可能是一个巨大的挫折源！请随意删除任何不需要的样式

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

我找到了一个在我的案例中有效的解决方案：

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



您只需覆盖min width设置100%和important，结果如下：


如果不应用它，您将始终得到以下结果：

如果您想将整个宽度作为父对象，跨越视口的整个宽度，请使用
.container fluid
。
输入[type=text]{宽度：100%；框大小：边框框；高度：28px；}为我工作
{宽度：100%；框大小：边框框；}
对我有用。对于Bootstrap 3，使用
表单控件
，它在BS 3中增加了
宽度：100%
，在覆盖
表单控件
类的输入上有一个覆盖
的最大宽度：280px
。事实上，不管怎样，这是来自默认的Site.css，微软在新的ASP.NET项目中包含了它。Boo！@Finster Boo，indeed。@Finster OMG，非常感谢Fin！！！为什么我的输入范围没有增长，这让我发疯。愚蠢的MICROSOFT…GRRR！！！我遇到了完全相同的问题，并从site.css中删除了设置。现在看看还有什么问题。css仍然是意大利面：/