twitter-bootstrap 使用响应式 Twitter Bootstrap 的内容重叠水平形式的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14390045/
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
Trouble with content overlapping horizontal form using responsive Twitter Bootstrap
提问by Cofey
I have spent more time than I ever care to admit trying to fix this stupid bug. I have a form that displays to the left of some content. It looks okay on a wide and narrow screen, but on a tablet width (it overlays between 770 and 950 or so) the content to the right overlaps the form fields.
我花了比以往任何时候都愿意承认尝试修复这个愚蠢的错误更多的时间。我有一个显示在某些内容左侧的表单。它在宽屏和窄屏上看起来都不错，但在平板电脑宽度上（覆盖在 770 到 950 左右之间），右侧的内容与表单字段重叠。
Am I missing something in my markup to use Twitter Bootstrap properly or do I need to add some custom styles using breakpoints to fix it? It appears that the fixed pixel width is causing the issue defined in bootstrap.css. Shouldn't these width properties use % since I'm using a fluid responsive layout? 
我是否在标记中遗漏了一些东西来正确使用 Twitter Bootstrap 或者我是否需要使用断点添加一些自定义样式来修复它？似乎固定像素宽度导致了 bootstrap.css 中定义的问题。因为我使用的是流体响应式布局，所以这些宽度属性不应该使用 % 吗？
<div class="container-narrow">
<div class="content">
<div class="row-fluid">
<div class="span5">
<form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
<div class="control-group">
<label class="control-label required" for="Step1_email">Email <span class="required">*</span></label>
<div class="controls">
<input size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label>
<div class="controls">
<input size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
</div>
</div>
</form>
</div>
<div class="span7">
<div class="promo-btm">
<h2>Heading 2</h2>
<ul class="checks">
<li>Bullet One</li>
<li>Bullet Two</li>
</ul>
</div>
</div>
</div>
</div>
</div>
See the attached screenshot for the bug or you can reproduce it yourself using my fiddle.
请参阅随附的错误屏幕截图，或者您可以使用我的fiddle自己重现它。
If someone could help point out a way to fix this I would be extremely appreciative!
如果有人可以帮助指出解决此问题的方法，我将不胜感激！
采纳答案by Andres Ilich
Just add a width to your input elements so they can adapt responsively with all of your screen sizes. You can use something like .span12as a width on your input elements and that should fix the issue:
只需为您的输入元素添加一个宽度，这样它们就可以响应您的所有屏幕尺寸。您可以.span12在输入元素上使用类似宽度的内容，这应该可以解决问题：
HTML
HTML
<div class="container-narrow">
<div class="content">
<div class="row-fluid">
<div class="span5">
<form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
<div class="control-group">
<label class="control-label required" for="Step1_email">Email <span class="required">*</span></label>
<div class="controls">
<input class="span12" size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label>
<div class="controls">
<input class="span12" size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
</div>
</div>
</form>
</div>
<div class="span7">
<h2>Heading 2</h2>
<ul class="checks">
<li>Bullet One</li>
</ul>
</div>
</div>
</div>
</div>
回答by David Taiaroa
The other posts have pinpointed the root cause of the problem, that your form is too wide for the span5 div with the default bootstrap css
其他帖子已经查明了问题的根本原因，即您的表单对于具有默认引导 css 的 span5 div 来说太宽了
It's not too difficult to make it fit though. See if this helps : http://jsfiddle.net/panchroma/FXXaZ/
不过，让它合身并不太难。看看这是否有帮助：http: //jsfiddle.net/panchroma/FXXaZ/
I have tightened up your form with this CSS:
我用这个 CSS 收紧了你的表格：
/* pull control label left */
.form-horizontal .control-label {
width:70px; /* default 160 */
}
/* pull input box left */
.form-horizontal .controls {
margin-left: 90px; /* defaul 180 */
}
/* shorten input box */
input, textarea, .uneditable-input {
width: 180px; /* default 206 */
}
Good luck!
祝你好运！
回答by thebjorn
Your form is too wide for the .span5 column. Try adding this above:
您的表单对于 .span5 列来说太宽了。尝试在上面添加：
<div class="row-fluid">
<div class="span5">hello</div>
<div class="span7">world</div>
</div>
and add the following style:
并添加以下样式：
.row-fluid > div { outline: 5px solid green; }
and you'll see what I mean.
你会明白我的意思。
