Question

我从我的页面中删除了所有内容，只是指向新的引导程序文件的链接。尽管如此，即使我的跨度增加到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>

Answer 1

在您的代码中，您使用的是row-fluid，因此您通常需要使用bootstrap组合css或包含bootstrap响应式css。

对于在同一行上包含多个网格输入的表单，您还需要在<div class="controls controls-row">中对它们进行扭曲以使填充都正常工作。

在我的测试中，我仍然注意到某些屏幕宽度的奇怪布局。对我来说，当使用非流体行时，我会为您的表单获得最一致的结果。

请参阅http://jsfiddle.net/panchroma/zhsks/，这一切都适合您（非流体行）

有关controls-row div的详细信息，请参阅http://twitter.github.com/bootstrap/base-css.html#forms

祝你好运！

Bootstrap不会产生均匀的跨度

1 个答案: