为Bootstrapinput完善100％宽度的父容器？

如何使Bootstrapinput字段与其父元素的宽度完全相同？

正如steve-obrien在Bootstrap Issue＃1058中写的：

直接应用于input字段时，设置为100％不起作用，因为它不考虑填充。 所以你最终得到了100％的容器加上input框上的填充，所以input框通常会在容器外面突破。

该票提供了各种解决scheme，但是我正在寻找最好的方法 – 最好是由Bootstrap提供的CSS类。

Answer 1

在不同的屏幕宽度下，应用input-block-level类对于我来说非常有用。 它由Bootstrap在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 } 

这与“汇编”在他对第1058号问题的评论中提出的方式非常相似。

Answer 2

只需添加框大小：

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

Answer 3

对于任何人来说，这个build议是删除所有的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> 

Answer 4

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

内容箱

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

边界框

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

---

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

这个CSS的兼容性很好。

Answer 5

只需添加：

 width: 100% !important; 

Answer 6

关于什么？

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

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

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

Answer 7

如果您使用C＃ASP.NET MVC的默认模板，您可能会发现site.css会覆盖一些Bootstraps样式。 如果你想使用Bootstrap，像我一样，有M $覆盖这个（不知情）可以是一个很大的挫折源！ 免费删除任何不需要的风格…

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

Answer 8

我发现了一个解决scheme，在我的情况下工作：

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

你只需要覆盖最小宽度设置100％和重要的结果是这样的：

如果你不应用它，你将永远得到这个：