2013-03-31 9 views
2

У меня есть проблема с использованием Bootstrap.Строка больше, чем контейнер в 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 есть только высота и цвет дел.

+0

Я сделал это jsfiddle, и он работает хорошо, или плохо мой пример? http://jsfiddle.net/GJS7c/ – SoldierCorp

ответ

7

Ряд не больше контейнера. Это вызвано отзывчивым дизайном, который устанавливает строку margin-left -30px при разрешении более 1200 пикселей. Если вы этого не хотите, добавьте

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

до </head>.

Другие вопросы:

Ваш заголовок должен быть

<!DOCTYPE html> 
<html> 

Вы используете OLDSCHOOL определение документа html4. Используйте HTML5 (. В качестве начальной загрузки документы настоятельно рекомендуем С учетом указанных выше, ваша страница будет идти в Quirksmode в 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>