我在Twitter Bootstrap遇到了一个非常奇怪的问题。我正在使用Bootstrap网站上的“自定义”页面下载的自定义版本的Bootstrap。我正在使用自定义版本,因为我需要使用24列而不是12列,以便为我提供所需的各种列宽。
这些是我在Bootstrap网站上的Customization表单中输入的自定义值:
@gridColumns 24px
@gridColumnWidth 30px
@gridGutterWidth 10px
我选中了所有选项,但响应复选框除外。我正在构建的网站将仅固定宽度,因此我关闭了所有五个响应选项。
下载文件后,我创建了一个非常基本的HTML页面来测试网格系统。
这是HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="span9" style="background: #F00;">SPAN 9 COLUMN</div>
<div class="span15" style="background: #0F0;">SPAN 15 COLUMN</div>
</div>
</div>
</header>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
问题是浏览器似乎忽略了在bootstrap.min.css文件中设置的.row和.spanXX样式上设置的CSS宽度。我检查了CSS文件,宽度肯定包括在内:
bootstrap.min.css的第42-90行
.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:974;}
.span24{width:974;}
.span23{width:933;}
.span22{width:892;}
.span21{width:851;}
.span20{width:810;}
.span19{width:769;}
.span18{width:728;}
.span17{width:687;}
.span16{width:646;}
.span15{width:605;}
.span14{width:564;}
.span13{width:523;}
.span12{width:482;}
.span11{width:441;}
.span10{width:400;}
.span9{width:359;}
.span8{width:318;}
.span7{width:277;}
.span6{width:236;}
.span5{width:195;}
.span4{width:154;}
.span3{width:113;}
.span2{width:72;}
.span1{width:31;}
.offset24{margin-left:994;}
.offset23{margin-left:953;}
.offset22{margin-left:912;}
.offset21{margin-left:871;}
.offset20{margin-left:830;}
.offset19{margin-left:789;}
.offset18{margin-left:748;}
.offset17{margin-left:707;}
.offset16{margin-left:666;}
.offset15{margin-left:625;}
.offset14{margin-left:584;}
.offset13{margin-left:543;}
.offset12{margin-left:502;}
.offset11{margin-left:461;}
.offset10{margin-left:420;}
.offset9{margin-left:379;}
.offset8{margin-left:338;}
.offset7{margin-left:297;}
.offset6{margin-left:256;}
.offset5{margin-left:215;}
.offset4{margin-left:174;}
.offset3{margin-left:133;}
.offset2{margin-left:92;}
.offset1{margin-left:51;}
通过大量试验和错误,我发现如果我从HTML文件的顶部完全删除Doctype行,页面就会正确显示!这种行为在Firefox(19.02)和IE 10上是一致的。
当我在Firebug中检查rowXX和span DIV标记时,当HTML中包含DOCTYPE行时,CSS被指示为空 - 请参阅下面附带的屏幕标记。
来自Firefox的Screengrab,其中从HTML中删除了Doctype: http://tinypic.com/r/24gp1er/6
来自Firefox的Screengrab,HTML中包含Doctype: http://tinypic.com/r/13ye05g/6
提前感谢任何有助于解决此问题的建议。
答案 0 :(得分:1)
您的CSS文件可能存在问题。首先@gridColumns 24px
应为@gridColumns 24
(即指定列数,而不是宽度。
检查http://fiddle.jshell.net/panchroma/pegjC/show/或the jsFiddle
的结果和网页来源您可以从https://dl.dropbox.com/u/2665617/bootstrap-24grid/css/bootstrap.css和https://dl.dropbox.com/u/2665617/bootstrap-24grid/css/bootstrap.min.css
获取我的自定义24col css版本希望这有帮助!