CSS Bootstrap 输入的父容器的完美 100% 宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11232627/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Perfect 100% width of parent container for a Bootstrap input?
提问by David J.
How do I make a Bootstrap input field be exactly 100% as wide as its parent?
如何使 Bootstrap 输入字段与其父项的宽度正好 100%？
As steve-obrien wrote in Bootstrap Issue #1058:
正如 steve-obrien 在Bootstrap Issue #1058 中所写：
Setting to 100% does not work when applied directly to an input field as it does not take in to account the padding. So you end up with 100% of the container plus the padding on the input box, so the input box usually breaks outside its container.
直接应用于输入字段时，设置为 100% 不起作用，因为它不考虑填充。所以你最终得到了 100% 的容器加上输入框上的填充，所以输入框通常会在其容器之外断开。
That ticket offers various solutions, but I'm looking for the best way to do it -- preferably a CSS class already provided by Bootstrap.
这张票提供了各种解决方案，但我正在寻找最好的方法——最好是 Bootstrap 已经提供的 CSS 类。
回答by David J.
Applying the input-block-levelclass works great for me, across various screen widths. It is defined by Bootstrap in mixins.lessas follows:
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
}
This is very similar to the style suggested by 'assembler' in his comment on issue #1058.
这与 'assembler' 在他对 issue #1058 的评论中建议的风格非常相似。
回答by LaundroMatt
Just add box-sizing:
只需添加盒子尺寸：
input[type="text"] {
box-sizing: border-box;
}
回答by Dave
If you're using C# ASP.NET MVC's default template you may find that site.cssoverrides some of Bootstraps styles. If you want to use Bootstrap, as I did, having M$ override this (without your knowledge) can be a source of great frustration! Feel free to remove any of the unwanted styles...
如果您使用 C# ASP.NET MVC 的默认模板，您可能会发现site.css覆盖了一些 Bootstrap 样式。如果你想像我一样使用 Bootstrap，让 M$ 覆盖它（在你不知情的情况下）可能会导致很大的挫败感！随意删除任何不需要的样式...
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
回答by kurdtpage
For anyone Googling this, one suggestion is to remove all the input-groupclass instances. Worked for me in a similar situation. Original code:
对于任何使用谷歌搜索的人，一个建议是删除所有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>
New code:
新代码：
<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>
回答by Federico Navarrete
I found a solution that worked in my case:
我找到了一个适用于我的案例的解决方案：
<input class="form-control" style="min-width: 100%!important;" type="text" />
You only need to override the min-widthset 100%and importantand the result is this one:
您只需要覆盖100%和重要的min-width设置，结果是这样的：
If you don't apply it, you will always get this:
如果你不应用它，你将永远得到这个：
回答by nh43de
In order to get the desired result, you must set "box-sizing: border-box" vs. the default which is "box-sizing: content-box". This is precisely the issue you are referring to (From MDN):
为了获得所需的结果，您必须设置“box-sizing:border-box”与默认值“box-sizing: content-box”。这正是您所指的问题（来自 MDN）：
content-box
内容框
This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.
这是 CSS 标准指定的初始值和默认值。宽度和高度属性的测量仅包括内容，但不包括填充、边框或边距。
border-box
边框框
The width and height properties include the content, the padding and border, but not the margin."
宽度和高度属性包括内容、内边距和边框，但不包括边距。”
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
参考：https: //developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Compatibility for this CSS is good.
这个 CSS 的兼容性很好。
回答by Kvlknctk
Use .container-fluid, if you want to full-width as parent, spanning the entire width of your viewport.
使用.container-fluid，如果您想要全宽作为父级，跨越视口的整个宽度。
回答by Piotr Knut
What about?
关于什么？
input[type="text"] {
max-width:none;
}
Checking that some css file is causing problems. By default bootstrap displays over the entire width. For instance in MVC directory Content is site.css and there is a definition constraining width.
检查某些 css 文件是否导致问题。默认情况下，引导程序显示在整个宽度上。例如在 MVC 目录中内容是 site.css 并且有一个定义约束宽度。
input,select,textarea {
max-width: 280px;}
回答by vhstrejo
just add:
只需添加：
width: 100% !important;
