Bootstrap doctype導致寬度被忽略

我遇到了一個非常奇怪的問題與Twitter Bootstrap。我使用通過Bootstrap網站中的「自定義」頁面下載的自定義Bootstrap版本。我使用的是自定義版本，因爲我需要使用24列而不是12列，以便爲我提供所需的各種列寬。Bootstrap doctype導致寬度被忽略

這是我進入引導網站上的自定義表單自定義值：

@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>

的問題是，瀏覽器似乎忽略對.row設置的CSS寬度和.spanXX風格，都在bootstrap.min.css文件中設置。我檢查了CSS文件，寬度肯定包括：

線bootstrap.min.css

.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;}

的42-90通過大量的試驗和錯誤，我發現，如果我完全刪除文檔類型從HTML文件的頂部行，頁面顯示正確！這種行爲在Firefox（19.02）和IE 10中是一致的。

當我在Firebug中檢查rowXX和span DIV標記時，當DOCTYPE行包含在HTML中時，CSS被指示爲空 - 請參閱下面的附加屏幕抓圖。從Firefox

Screengrab與文檔類型從HTML中刪除：從Firefox與文檔類型 http://tinypic.com/r/24gp1er/6

Screengrab在HTML包括：提前 http://tinypic.com/r/13ye05g/6

感謝您的任何建議，以幫助解決這個問題。

來源

2013-04-02 JonB

這將是有益的，如果你可以發佈任何一個鏈接的實際頁面，或創建的jsfiddle –

您的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搶我的自定義24col CSS的版本和https://dl.dropbox.com/u/2665617/bootstrap-24grid/css/bootstrap.min.css

希望這有助於

來源

2013-04-02 18:54:53

太感謝你了，大衛你是對的 - ！。！我」 d在gridColumns字段中意外地輸入'24px'而不是'24'，搞砸了我的CSS文件。現在完美運作。再次感謝您的時間和專業知識。 – JonB

這很棒@ Jon-SenseDesign。如果問題得到解決，請考慮接受答案，以便其他人不花時間。乾杯! –

Bootstrap doctype導致寬度被忽略

回答

相關問題