为什么我的Twitter Bootstrap表单字段溢出使用stream体容器?

更新:这里的问题演示: http : //jsfiddle.net/fdB5Q/embedded/result/

从大约767px到998px,表单域比包含的域宽。

小于767px,整个表单区域转移到一个新的行。 当浏览器窗口大约200px时呈现的页面完美显示。 表单字段缩小,如你所期望的。

对于视觉效果,请看这个非常相似的问题: Twitter Bootstrap CSS静态stream体表单定位

这是头脑中的一切:

<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> 

这里是身体的一切:

 <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> 

我认为我误解了框架的某些部分。 我应该不使用stream体容器吗? 我究竟做错了什么? 我可以把一些东西放在一起来解决这个问题,但是我认为这个问题可能是我做了错误的大事情。

我试图改变我的跨度7和5,仍然有相同的错误。 我尝试了6和6,但在这一点上,页面开始显得荒谬。 其余的答案对我来说没有意义。

我将input类更改为大而不是xlarge。 它仍然有一个溢出的宽度范围,如果在显示屏上有空间的话,我真的很想要更宽的表单域。

我想避免水平滚动条,我希望我的智能手机上的横向或纵向模式的页面文字大小相同。

更新:图片

我的问题页面:

问题页面

简化版本:

简单的版本

200 px浏览器宽度的简化版本:

简单的版本在200px宽度

7 Solutions collect form web for “为什么我的Twitter Bootstrap表单字段溢出使用stream体容器?”

input的html标签及其对应的.input-*样式只设置CSS width 。 这是devise。

但是增加一个css max-width:100%将确保太大的input被控制。
比如把这个添加到你的头上:

 <style> input { max-width: 100%; } </style> 

通常我更喜欢在class="span12"的元素中使用另一个class="row-fluid"class="spanX"来获得某个元素的100%的宽度。 这不会导致不同的分辨率的错误。 所以,我已经在span4类的元素中添加了另一个row-fluid类,并在新的row-fluid添加了span12 div。 你必须重写默认的Bootstrap设置来获得你所需要的,所以我在<input />元素中添加了类.my-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> 

和CSS类覆盖

 ​.my-input { width: 100%; padding: 4px 0 4px 0 !important; }​ 

你可以看到和Jsfiddle演示 ,尝试调整屏幕大小。

我刚刚遇到了这个问题,并检查引导文档的表单input它声明'使用相对大小类如.input大或匹配您的input到网格列大小使用.span *类。

我的引导行被设置为span9的内容和侧边栏的span3。 设置<input class='span3'/>解决了我的问题,input框保留在边<input class='span3'/> ,因为屏幕缩小了。

在玩这些FOREVER(看来)之后只是一点点的input。 我使用一个简单的宽度属性,并将其设置为85%和95%之间取决于容器,填充和其他CSS因素,以防止input字段实际伸展到容器的边缘。

 .input-example { width: 90%; } 

我不是这个专家! 我只是提供我所学到的东西,请不要把这个作为一个经验丰富的开发人员的build议。 试图回馈一个在无数场合拯救了我的生命的社区。

不幸的是,这个问题比所有这些都更危险。 使用最大宽度对我没有任何帮助。 我讨厌看起来很糟糕的事情,所以我挖了一点

它归结为一个表单控件的css声明中的这三行:

 width: 100%; padding: 6px 12px; border: 1px solid #cccccc; 

当设置文本types的input元素的宽度时,水平填充和边框将被添加到100%,而不是从中取出。 所以,如果100%的宽度w是500px,那么文本input表单控件的宽度变成w + 12 + 12 + 1 + 1,526px。 额外的26px是一个常量,这意味着除非宽度百分比dynamic地以100%*(w /(w + 26px))或100%-26px计算,否则事情将永远不会出现。

我个人认为这是html / css接口的定义或实现中的一个错误(我不知道是哪个,我真的不想在标准的stream沙中find引用)。如果你例如input字段将是100%的宽度,那么需要应用校正来使边缘内的宽度为100%,而不是100%,而不包括水平填充和边框宽度。

顺便说一下,百分比值或固定大小并不重要, 他们也是26px。 你需要从宽度中滤除这26px。

尽pipe如此,至less如果您使用允许客户端计算的CSS编译器,所有这些都不会丢失。 比如说less一些

 input.form-control[type=text] { width: calc(~'100%-26px'); } 

将会使这一切变得更好。 请注意,电子邮件和密码types(至less)也有同样的问题。

当然,26px是一种很脆弱的东西,但是常量被硬编码到forms控制声明中,所以你的双手是捆绑在一起的。 一个testing将是很好的,检查控制的大小控制在抓取引导升级CSS声明的变化,但不是今晚,谢谢。

正如Pavlo在这个答案中所指出的那样: Twitter Bootstrap:停止input字段的扩展

使用类input-block-level代替inputxlarge(或其他大小)也解决了这个问题。

我用表单input和面板体来解决这个问题。 我在下面的项目中回答了这个问题: Twitter Bootstrap:停止input字段

对我来说问题在于表单溢出。 这使投入效仿。 通过固定窗体的最大宽度(最大宽度:100%),我可以修复input以及可能放置在窗体内的任何其他内容。

  • Bootstrap 3 - 在每个网格列之后打印布局并中断
  • 是否有可能使Font Awesome图标大于“fa-5x”?
  • 引导button单击时显示蓝色轮廓
  • Bootstrap旋转木马全屏幕
  • Twitter Bootstrap警报消息closures并再次打开
  • select器是做什么的?
  • 如何将button置于Twitter Bootstrap 3中?
  • Bootstrap 3input附加升级
  • 了解Bootstrap 3中的网格类(col-sm-#和col-lg-#)
  • Bootstrap:如何在列中alignment内容?
  • 点击链接后closures引导程序下拉菜单