html - Bootstrap 3.0 最大列宽 : 95px or 97. 5px?

标签 html css twitter-bootstrap

如果您查看页面:Boostrap Docs ,在网格选项标题下,有一个表格列出了新网格的功能。

我做了一个有 12 列的小页面(类为 .col-lg-)。

在表格中,它表示“Max column with”为 95px(表格中的第 4 行)。但是,当我检查一个列时,计算出的是 97.5px,而不是 95px。

当我在 Photoshop 中测量列长度时,它们在 98px 和 97px 之间交替(可能是由于将 77.5px 向上舍入)。

非常感谢你们能解释一下这种差异是如何产生的吗?或者,bootstrap 文档在提到“最大列宽”时是否指的是其他内容?

(我不擅长 CSS 和网格系统,如有错误,请见谅)。

这是我放在一起的测试代码:

<!DOCTYPE html>
    <head>
        <title>Test</title>
        <link type="text/css" rel="stylesheet" href="css/bootstrap.css" />  
        <style>
            p {
                background-color: #999
            }   
        </style>
    </head>
    <body>
        <div class="container">
                <div class="row">
                <div class="col-xs-1"><p>&nbsp;</p></div>
                <div class="col-xs-1"><p>&nbsp;</p></div>
                <div class="col-xs-1"><p>&nbsp;</p></div>
                <div class="col-xs-1"><p>&nbsp;</p></div>
                <div class="col-xs-1"><p>&nbsp;</p></div>
                <div class="col-xs-1"><p>&nbsp;</p></div>
                <div class="col-xs-1"><p>&nbsp;</p></div>
                <div class="col-xs-1"><p>&nbsp;</p></div>
                <div class="col-xs-1"><p>&nbsp;</p></div>
                <div class="col-xs-1"><p>&nbsp;</p></div>
                <div class="col-xs-1"><p>&nbsp;</p></div>
                <div class="col-xs-1"><p>&nbsp;</p></div>           
            </div>  
        </div>
        <script src="js/bootstrap.js" >
    </body>
</html>

谢谢。

最佳答案

我在 Ubuntu 操作系统上。我得到以下结果。 1.火狐98px 2. Chrome 97px

我认为 2-3 px 的差异来自浏览器计算宽度的方式。

附言 GitHub 上提出了同一张票 https://github.com/twbs/bootstrap/issues/12808 此问题已得到纠正,更正后的值已在此处列出。 https://github.com/twbs/bootstrap/commit/a083f0deb77dd479a7690a4ab90f73f7f7f375cd

希望这能解决您的问题。

关于html - Bootstrap 3.0 最大列宽 : 95px or 97. 5px?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21210364/

相关文章:

html - 如何在div中的列表两侧放置相等大小的边框

jquery - 使用 Flask Bootstrap class.active 函数

javascript - 动画后删除 SVG 元素

html - DIV水平居中

javascript - map 不占用整个div

javascript - 使用参数将 Bootstrap 3 远程模态转换为 Bootstrap 4 模态

asp.net-mvc - ASP.NET MVC 验证器无法识别 Bootstrap DatePicker 格式

JavaScript 制作快速运行的图像幻灯片?

html - Internet Explorer 网站顶部的额外空间

javascript - 计算伪元素中的元素和输出