css - Bootstrap 不产生均匀的跨度

标签 css twitter-bootstrap

我已经从我的页面上删除了所有内容,只有一个指向新 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/

相关文章:

javascript - 如何有多个链接悬停颜色,每次鼠标悬停时都不同?

html - CSS 中的两个导航元素

Html5 CSS 表格边框在 IE 11 中不可见

css - 如何调整mat-option的位置

html - 使用 CSS 将 Bootstrap 列转换为表格时获取空白

css - 为什么 Bootstrap 4 中的 img-fluid 类不调整我在它们的 div 中的图像的大小?

html - Font Awesome 图标悬停在文本之外

javascript - $(this).css 不改变 css 值

javascript - Bootstrap 中的两个导航栏

jquery - 防止 Bootstrap 模式重复的ajax调用?