該行比Bootstrap中的容器大

的代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Landing Page</title> 
    <!-- Bootstrap --> 
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> 
    <link href="bootstrap/css/custom.css" rel="stylesheet" media="screen"> 
    <!-- Javascript --> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
    <script src="bootstrap/js/bootstrap.min.js"></script> 
    </head> 
    <body> 
    <div class="container"> 
    <div class="row" id="main_header"> 
    </div> 
    </div> 
    </body> 
</html>

但結果是，行比容器大。

我離開你的照片來理解我的意思

http://i50.tinypic.com/2dvsah3.png

在custom.css只有高度和div的顏色。

來源

2013-03-31 Marco Gurnari

我做了這個jsfiddle，它運作良好，或壞我的例子？ http://jsfiddle.net/GJS7c/ – SoldierCorp

該行不大於容器。它是由響應式設計引起的，該設計將行margin-left設置爲-30px，分辨率大於1200像素。如果您不想要，請添加

<style type="text/css"> 
.row { 
    margin-left: 0px; 
} 
</style>

之前</head>。

其他問題：

你的頭應該是

<!DOCTYPE html> 
<html>

您使用的是舊校園HTML4文檔定義。使用HTML5（如引導文檔強烈建議通過上述，您的頁面將在怪異模式走在IE）

此外，使用更新的jQuery的，你的頁面永遠不會有1.3的工作 - 「on」不存在1.3，bootstrap指的是jquery on多次。使用至少1.7.1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

來源

2013-03-31 10:43:30 davidkonrad

該行比Bootstrap中的容器大

回答

相關問題