如何使 Bootstrap 输入字段与其父项一样宽 100%？
正如 steve-obrien 在Bootstrap 问题 #1058中所写：
当直接应用于输入字段时，设置为 100% 不起作用，因为它没有考虑填充。所以你最终会得到 100% 的容器加上输入框上的填充，所以输入框通常会在其容器之外中断。
那张票提供了各种解决方案，但我正在寻找最好的方法——最好是 Bootstrap 已经提供的 CSS 类。
问问题
126563 次
9 回答
108
input-block-level在各种屏幕宽度上应用该课程对我来说非常有用。它由Bootstrapmixins.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
}
这与 'assembler' 在他对问题 #1058 的评论中建议的风格非常相似。
于 2012-06-27T18:22:26.610 回答
22
Just add box-sizing:
input[type="text"] {
box-sizing: border-box;
}
于 2013-02-03T01:37:12.697 回答
10
如果您使用 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;
}
于 2017-02-28T08:50:50.147 回答
8
对于任何在谷歌上搜索的人，一个建议是删除所有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>
于 2015-10-15T07:28:12.527 回答
5
我找到了一个适用于我的解决方案：
<input class="form-control" style="min-width: 100%!important;" type="text" />
您只需要覆盖最小宽度集100%和重要的，结果就是这个：
如果你不应用它，你总是会得到这个：
于 2017-06-29T08:10:39.620 回答
3
为了得到想要的结果，你必须设置“box-sizing:border-box”而不是默认的“box-sizing:content-box”。这正是您所指的问题（来自 MDN）：
内容框
这是 CSS 标准指定的初始值和默认值。测量宽度和高度属性仅包括内容，但不包括填充、边框或边距。
边框
宽度和高度属性包括内容、内边距和边框，但不包括边距。”
参考：https ://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
这个 CSS 的兼容性很好。
于 2016-10-17T00:12:29.897 回答
1
使用.container-fluid，如果你想全宽作为父级，跨越你的视口的整个宽度。
于 2019-07-11T17:51:16.613 回答
0
关于什么？
input[type="text"] {
max-width:none;
}
检查某些 css 文件是否导致问题。默认情况下，引导程序显示在整个宽度上。例如，在 MVC 目录中，内容是 site.css，并且有一个定义限制宽度。
input,select,textarea {
max-width: 280px;}
于 2016-09-20T22:11:50.830 回答
-1
只需添加：
width: 100% !important;
于 2014-10-10T03:46:29.890 回答