问题描述
我已经删除了页面上的所有内容，只是一个指向新引导文件的链接.尽管如此，即使我的跨度加起来为12，它们在Firefox和chrome中都显示出不同的宽度.到底是怎么回事?
I have stripped everything from my page, just a link to a fresh bootstrap file. Still, even with my spans adding up to 12, they all display different widths in both firefox and chrome. What in the world could be going wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="row-fluid">
<input type="text" class="span6" placeholder="Pre">
<input type="text" class="span6" placeholder="Pre">
</div>
<div class="row-fluid">
<input type="text" class="span6" placeholder="Pre">
<input type="text" class="span4" placeholder="First Name">
<input type="text" class="span2" placeholder="Sufix">
</div>
<div class="row-fluid">
<input type="text" class="span4" placeholder="Pre">
<input type="text" class="span4" placeholder="First Name">
<input type="text" class="span4" placeholder="Last Name">
</div>
<div class="row-fluid">
<input type="text" class="span2" placeholder="Pre">
<input type="text" class="span4" placeholder="First Name">
<input type="text" class="span4" placeholder="Last Name">
<input type="text" class="span2" placeholder="Sufix">
</div>
<div class="row-fluid">
<input type="text" class="span6" placeholder="Pre">
<input type="text" class="span6" placeholder="First Name">
</div>
</body>
推荐答案
在您的代码中，您使用的是行流体，因此通常需要使用Bootstrap组合CSS或包含Bootstrap响应CSS.
In your code you are using row-fluid so you would generally need to use either the bootstrap combined css or include the bootstrap responsive css.
在使用表格的情况下，当在同一行上包含多个网格输入时，还需要在< div class ="controls controls-row"> 中进行变形，以使填充全部正常工作.
Also with forms when including multiple grid inputs on the same line you also need to warp them in <div class="controls controls-row"> to get the padding all working correctly.
在测试中，我仍然注意到某些屏幕宽度上的奇数布局斑点.对我来说，当使用非流体行时，我会为您的表单获得最一致的结果.
In my tests I still noticed the odd layout blip at certain screen widths. For me I get the most consistent results for your form when using non-fluid rows.
请参见 http://jsfiddle.net/panchroma/zhsks/，所有这些都对您有用(非流体行)
See http://jsfiddle.net/panchroma/zhsks/ with this all working for you (non-fluid row)
请参见 http://twitter.github.com/bootstrap/base-css.html#forms 了解有关controls-row div
See http://twitter.github.com/bootstrap/base-css.html#forms for more details about the controls-row div
祝你好运！
这篇关于引导程序不会产生均匀的跨度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！