我已经从我的页面上删除了所有内容,只有一个指向新 Bootstrap 文件的链接。尽管如此,即使我的跨度加起来达到 12,它们在 firefox 和 chrome 中都显示不同的宽度。到底哪里出了问题?
<!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>
最佳答案
在您的代码中,您使用的是 row-fluid,因此您通常需要使用 bootstrap 组合 CSS 或包含 bootstrap 响应式 CSS。
对于在同一行包含多个网格输入的表单,您还需要在 <div class="controls controls-row">
中扭曲它们使填充全部正常工作。
在我的测试中,我仍然注意到在某些屏幕宽度下奇怪的布局问题。对我来说,当使用非流动行时,我会为您的表单获得最一致的结果。
参见 http://jsfiddle.net/panchroma/zhsks/这一切都为你工作(非流动行)
参见 http://twitter.github.com/bootstrap/base-css.html#forms有关控件行 div 的更多详细信息
祝你好运!
关于css - Bootstrap 不产生均匀的跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14469605/