为什么我的Twitter Bootstrap表单字段溢出他们的井使用流体容器? [英] Why do my Twitter Bootstrap form fields overflow their well using fluid container?
问题描述
更新:演示这里的问题: http://jsfiddle.net/fdB5Q/embedded/result /
从大约767像素到998像素,表单字段比包含井更宽。
小于767像素,整个表单区域移至新行。当浏览器窗口宽度约为200px时,页面呈现完美。
对于视觉效果,看看这个非常相似的问题:
Twitter Bootstrap CSS静态流体形式定位
在头部:
< link rel =stylesheethref =http://twitter.github.com/bootstrap /assets/css/bootstrap.css/>
< link rel =stylesheethref =http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css/>
< script type =text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js>< / script>
身体的一切:
< div class =container-fluid>
< div class =row-fluid>
< div class =span8>
< p>部分内容。< / p>
< / div>
< div class =span4>
< div class =well>
< div class =control-group>
< label class =control-labelfor =name>您的姓名< / label>
< div class =controls>
< input type =textclass =input-xlargename =nameid =namemaxlength =100/>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
我认为我误解了框架的某些部分。我应该不使用流体容器吗?我做错了什么?我可以把一些东西放在一起来解决这个问题,但我认为问题可能是我做错了大的图片。
我试图改变我的跨度到7和5,仍然有同样的错误。我试了6和6,但在那一点页面开始看起来可笑。其余的答案对我没有意义。
我将输入类更改为大而不是xlarge。它仍然有一个宽度范围,它溢出,我真的想要更宽的表单字段,如果有显示的空间。
我想避免水平滚动条,并且我想在我的智能手机上的横向或portait模式的页面文本是相同的大小。
UPDATE:图片
我的问题页面:
$ b
简体版:
浏览器宽度为200像素时的简化版本:
输入html标签及其相应的 .input - *
样式只设置css width
。这是设计。
但是添加css max-width:100%
将确保太大的输入受到控制。
例如将此添加到您的标题中:
< style&
input {
max-width:100%;
}
< / style>
UPDATE: Demo of problem here: http://jsfiddle.net/fdB5Q/embedded/result/
From about 767px to 998px, the form fields are wider than the containing well.
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.
For a visual, look at this very similar question: Twitter Bootstrap CSS static-fluid form positioning
Here's everything in the 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.
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.
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:
The input html tags and their corresponding .input-*
styles only set the css width
. This is by design.
But adding a css max-width:100%
will ensure that too large inputs are kept under control.
e.g. add this to your Head:
<style>
input {
max-width: 100%;
}
</style>
这篇关于为什么我的Twitter Bootstrap表单字段溢出他们的井使用流体容器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!