Html 为什么我的 Twitter Bootstrap 表单字段使用流体容器溢出他们的井？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11855086/
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
Why do my Twitter Bootstrap form fields overflow their well using fluid container?
提问by scw
UPDATE: Demo of problem here: http://jsfiddle.net/fdB5Q/embedded/result/
更新：这里的问题演示：http: //jsfiddle.net/fdB5Q/embedded/result/
From about 767px to 998px, the form fields are wider than the containing well.
从大约 767px 到 998px，表单域比包含的井宽。
Smaller than 767px and the entire form area shifts to a new line. The page rendered when the browser window is about 200px wide displays perfectly. The form fields shrink as you would expect.
小于 767px 并且整个表单区域会换行。浏览器窗口宽度约为 200px 时呈现的页面显示完美。表单字段会按您的预期缩小。
For a visual, look at this very similar question: Twitter Bootstrap CSS static-fluid form positioning
对于视觉，看看这个非常相似的问题： Twitter Bootstrap CSS static-fluid form定位
Here's everything in the Head:
这是 Head 中的所有内容：
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
Here's everything in the Body:
这是身体中的一切：
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
<p>Some Content.</p>
</div>
<div class="span4">
<div class="well">
<div class="control-group">
<label class="control-label" for="name">Your Name</label>
<div class="controls">
<input type="text" class="input-xlarge" name="name" id="name" maxlength="100" />
</div>
</div>
</div>
</div>
</div>
</div>
I think I am misunderstanding some part of the framework. Should I not be using a fluid container? What am I doing wrong?I could throw together something to fix this, but I think the problem may be that I am doing something wrong big picture.
我想我误解了框架的某些部分。我不应该使用液体容器吗？我究竟做错了什么？我可以拼凑一些东西来解决这个问题，但我认为问题可能是我做错了大局。
I tried changing my spans to 7 and 5 and still had the same error. I tried 6 and 6, but at that point the page started to look ridiculous. The rest of the answers didn't make sense to me.
我尝试将跨度更改为 7 和 5，但仍然出现相同的错误。我尝试了 6 和 6，但那时页面开始看起来很可笑。其余的答案对我来说没有意义。
I changed the input class to large instead of xlarge. It still had a width range where it overflowed, and I really would like wider form fields if there is room on the display.
我将输入类更改为 large 而不是 xlarge。它仍然有一个溢出的宽度范围，如果显示器上有空间，我真的想要更宽的表单域。
I want to avoid the horizontal scroll bar, and I want the page text to be the same size in landscape or portait mode on my smartphone.
我想避免水平滚动条，并且我希望在我的智能手机上的横向或纵向模式下，页面文本的大小相同。
UPDATE: Pictures
更新：图片
My problem page:
我的问题页面：
Simplified version:
简化版：
Simplified version at 200 px browser width:
200 px 浏览器宽度的简化版：
回答by Vino
The input html tags and their corresponding .input-*styles only set the css width. This is by design.
输入的 html 标签及其相应的.input-*样式仅设置 css width。这是设计使然。
But adding a css max-width:100%will ensure that too large inputs are kept under control.
e.g. add this to your Head:
但是添加 cssmax-width:100%将确保控制过大的输入。
例如，将此添加到您的 Head 中：
<style>
input {
max-width: 100%;
}
</style>
回答by Miljan Puzovi?
Usually I prefer to use another class="row-fluid"and class="span12"in elements with class="spanX"to get 100% width of some element. That will not cause bugs on different resolutions. So, I've added another row-fluidclass in your element with span4class, and inside that new row-fluidadded div with span12. You must somethimes override default Bootstrap settings to get what you need, so I've added also class .my-inputinside <input />element to get 100% width and remove left and right padding (padding will cause bug on right side). And here is code:
通常我更喜欢使用另一个class="row-fluid"和class="span12"元素class="spanX"来获得某些元素的 100% 宽度。这不会导致不同分辨率的错误。所以，我用row-fluidclass 在你的元素中添加了另一个类span4，并在新row-fluid添加的 div 中添加了span12. 您必须有时覆盖默认的 Bootstrap 设置才能获得所需的内容，因此我还在元素.my-input内部添加了类<input />以获得 100% 宽度并删除左右填充（填充会导致右侧出现错误）。这是代码：
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
<p>Some Content.</p>
</div>
<div class="span4 well">
<div class="row-fluid">
<div class="span12">
<label class="control-label" for="name">Your Name</label>
<input type="text" class="my-input" name="name" id="name" maxlength="100" />
</div>
</div>
</div>
</div>
</div>
and CSS class for override
和用于覆盖的 CSS 类
?.my-input
{
width: 100%;
padding: 4px 0 4px 0 !important;
}?
You can see and Jsfiddle demo, try to resize screen.
您可以看到和Jsfiddle 演示，尝试调整屏幕大小。
?
?
回答by Rich2020
I just came across this issue and a on checking the bootstrap docs for form inputs it states 'Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.'
我刚刚遇到了这个问题，在检查表单输入的引导程序文档时，它指出“使用相对大小调整类，如 .input-large 或使用 .span* 类将您的输入与网格列大小匹配。”
My bootstrap row was set to span9 for content and span3 for the sidebar. Setting <input class='span3'/>solved the issue for me, the input boxes remain within the sidebar as the screen size reduced.
我的引导行设置为内容的 span9 和侧边栏的 span3。设置<input class='span3'/>为我解决了这个问题，随着屏幕尺寸的减小，输入框仍保留在侧边栏中。
回答by 210 USA
Just a bit of input after playing with these FOREVER (it seems). I use a simple width attribute and set it to between 85% and 95% depending on the container, padding and other css factors to keep the input fields from actually stretching to edge of the container.
在玩这些 FOREVER 之后，只需一点输入（似乎）。我使用一个简单的 width 属性并将其设置为 85% 到 95% 之间，具体取决于容器、填充和其他 css 因素，以防止输入字段实际拉伸到容器边缘。
.input-example {
width: 90%;
}
I AM NOT AN EXPERT AT THIS! I am just offering what I have learned and please do not take this as advice from a seasoned developer. Trying to give a little back to a community that has saved my life on countless occasions.
我不是这方面的专家！我只是提供我所学到的知识，请不要将其视为经验丰富的开发人员的建议。试图回馈一个无数次拯救我生命的社区。
回答by The Software Barbarian
The problem is more insidious than all this to get right, unfortunately. Using max-widths did nothing for me. And I hate things looking crappy, so I dug into it a little...
不幸的是，这个问题比所有这些都更阴险。使用 max-widths 对我没有任何帮助。我讨厌看起来很糟糕的东西，所以我深入研究了一下......
It comes down to these three lines in the css declaration of a form-control:
它归结为表单控件的 css 声明中的这三行：
width: 100%;
padding: 6px 12px;
border: 1px solid #cccccc;
When the width of an text-type input element is set, the horizontal padding and border are added to the 100% instead of taken from it. So, if the 100% width w were say, 500px, then the width of the text input form control becomes w+12+12+1+1, 526px. The extra 26px are a constant which means unless the width percentage is calculated dynamically either as 100%*(w/(w+26px)) or 100%-26px, things will never come out even.
当设置文本类型输入元素的宽度时，水平填充和边框将添加到 100% 而不是从中取出。所以，如果 100% 宽度 w 是 500px，那么文本输入表单控件的宽度变为 w+12+12+1+1, 526px。额外的 26px 是一个常数，这意味着除非宽度百分比动态计算为 100%*(w/(w+26px)) 或 100%-26px，否则事情永远不会出现。
I personally believe this is an error in either the definition or implementation of the html/css interface (I don't know which, I really don't want to try to find the references in the shifting sands of the standards.) If you say an input field is going to be 100% width, then the correction needs to be applied to make the width inside the margins be 100%, not 100% without the horizontal padding and border widths included.
我个人认为这是 html/css 接口的定义或实现中的错误（我不知道是哪个，我真的不想尝试在标准的流沙中找到引用。）如果你假设输入字段将是 100% 宽度，那么需要应用更正以使边距内的宽度为 100%，而不是 100%，而不包括水平填充和边框宽度。
And, by the way, percentage value or fixed size doesn't matter; they're also off by 26px. You need to filter out these 26px from the width.
而且，顺便说一下，百分比值或固定大小无关紧要；它们也相差 26 像素。您需要从宽度中过滤掉这些26px。
All is not lost for bootstrap textual inputs though, at least if you're using a CSS compiler that allows client side calculations. In less, for instance
尽管如此，引导文本输入并不会丢失所有内容，至少如果您使用的是允许客户端计算的 CSS 编译器。少，例如
input.form-control[type=text] {
width: calc(~'100%-26px');
}
will make it all better. Note that email and password types (at least) have the same problem too.
会让这一切变得更好。请注意，电子邮件和密码类型（至少）也有同样的问题。
26px is kind of brittle, of course, but the constants are hardcoded into the form-control declaration, so your hands are kind of tied. A test would be nice that checked the sizes of controls on rendering to catch CSS declaration changes on bootstrap upgrades, but not tonight, thank you.
当然，26px 有点脆弱，但常量被硬编码到表单控件声明中，所以你的手有点束缚。检查渲染控件的大小以捕获引导程序升级时的 CSS 声明更改的测试会很好，但今晚不行，谢谢。
回答by Sean Kelly
For anyone to find
任何人都可以找到
Html:
网址：
<input class="form-control" placeholder="Threshold Type">
CSS:
CSS：
.form-control { box-sizing: border-box; }
回答by dpsthree
I ran across this problem with form inputs and panel body. I answered it in the following item: Twitter Bootstrap: Stop input field extending beyond well
我在表单输入和面板正文中遇到了这个问题。我在以下项目中回答了它： Twitter Bootstrap：停止超出井的输入字段
The problem for me was that the form was overflowing. This allowed the inputs to follow suit. By fixing the max-width of the form (max-width: 100%) I was able to fix inputs as well as any other content that may be placed inside the form.
我的问题是表格溢出了。这允许输入效仿。通过修复表单的最大宽度（最大宽度：100%），我能够修复输入以及可能放置在表单内的任何其他内容。
回答by Felby
As indicated by Pavlo in this answer: Twitter Bootstrap: Stop input field extending beyond well
正如 Pavlo 在这个答案中所指出的：Twitter Bootstrap：停止输入字段延伸到井之外
Using the class input-block-levelin place of the input-xlarge (or other sizes) solves the problem as well.
使用类input-block-level代替 input-xlarge（或其他大小）也可以解决问题。
