Twitter Загрузочный контейнерный контейнер не сбалансирован по центру

Я начал изучать Twitter Bootstrap, и я попытался написать или воспроизвести некоторые из своих примерных кодов. Я использовал div с классом .container для оболочки и добавил в него несколько строк и столбцов. Наличие div с классом .container предположительно центрирует div автоматически, но в моем случае у меня есть несбалансированный контент. Белое пространство с левой стороны намного шире белого пространства с правой стороны. Вот код (я не использую любые стили CSS):Twitter Загрузочный контейнерный контейнер не сбалансирован по центру

<!DOCTYPE html> 
<html> 

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>The Room</title> 

    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <link rel='stylesheet' href='style.css' /> 
    <!--responsive bootsrap here--> 
    <!--[if IE]> 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <script src="js/jquery-1.10.1.min.js"></script> 
    <script src="js/functions.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
</head> 

<body> 
    <div class="container"> 
     <div class="row"></div> 
     <div class="span12"> 
      <div class="navbar navbar-inverse"> 
        <div class="navbar-inner"> 
         <a href="#" class="brand">The Room</a> 
        <ul class="nav"> 
         <li class="active"><a href="#">Home</a></li> 
         <li class="divider-vertical"></li> 
         <li><a href="#">Preview</a></li> 
         <li class="divider-vertical"></li> 
         <li><a href="#">Blog</a></li> 
         <li class="divider-vertical"></li> 
         <li><a href="#">About</a></li> 
         <li class="divider-vertical"></li> 
        </ul> 
        <form class="navbar-search"> 
         <input type="text" class="search-query" placeholder="Search for..."> 
        </form> 
       </div> 
      </div> 
     </div> <!-- first row --> 
     <div class="span12"> 
      <div class="hero-unit"> 
       <h1>Hey Mark! <small>and everybody!</small></h1> 
       <p>Hey Mark! I am Johnny, I am super boring, I love to play football, and I am very passionate about film making. I love the idea on sucking on making films, spending $6m for my first feature film, which is my masterpiece of course! The title of my masterpiece, is "The Room" very catchy right? No, I did not hit her! I did not hit her! I did NOT!</p> 

       <p> 
        <a class="btn btn-primary btn-large">Watch Movie</a>`enter code here` 
       </p> 
      </div> 
     </div><!-- second row --> 
     </div> 
    </div> 
</body> 

</html>

Вот скриншот: https://dl.dropboxusercontent.com/u/70465637/error_center.jpg

Обратите внимание, как левая белое пространство шире правого белого пространства.

Справка Пожалуйста, заблаговременно.

источник

2013-06-28 rolzan

Создание строки, а затем положить содержимое строки (span12) вне DIV вызвало эту проблему. Всегда размещайте элемент span или col внутри элемента строки – Sudharsun

Ваш div.span12 должен быть ребенком div.row.

<div class="row"> 
    <div class="span12"></div> 
</div>

источник

2013-06-28 11:17:16

проверить код правильно ваш span12 ДИВ должен прийти внутри <div class="row"></div>

ваш код должен быть что-то вроде этого

<div class="container"> 

    <div class="row"> 
     <div class="span12"> your content goes here </div> 
    </div> 

</div>

источник

2013-06-28 11:27:29 LegendaryAks

Если вы все еще возникают проблемы с пробелами после ввода вашего span12 div внутри вашего ряда, то это может быть потому, что Bootstrap указывает свои собственные поля и отступы и т. д.

You ma y должен установить собственные поля или дополнения для вашего диапазона. Вы можете переопределить бутстраповских стили в вашем CSS с важной декларацией:

.span12 { 
    margin-left: -50px !important; 
}

источник

2013-06-28 11:31:23 gMok

заменить тело тега с этим

<body> 
    <div class="container"> 
     <div class="row"> 

     <div class="span12"> 
      <div class="navbar navbar-inverse"> 
       <div class="navbar-inner"> 
        <a href="#" class="brand">The Room</a> 
        <ul class="nav"> 
         <li class="active"><a href="#">Home</a></li> 
         <li class="divider-vertical"></li> 
         <li><a href="#">Preview</a></li> 
         <li class="divider-vertical"></li> 
         <li><a href="#">Blog</a></li> 
         <li class="divider-vertical"></li> 
         <li><a href="#">About</a></li> 
         <li class="divider-vertical"></li> 
        </ul> 
        <form class="navbar-search"> 
        <input type="text" class="search-query" placeholder="Search for..."> 
        </form> 
       </div> 
      </div> 
     </div> 
     <!-- first row --> 
     </div> 
     <div class="row"> 
     <div class="span12"> 
      <div class="hero-unit"> 
       <h1> 
        Hey Mark! <small>and everybody!</small></h1> 
       <p> 
        Hey Mark! I am Johnny, I am super boring, I love to play football, and I am very 
        passionate about film making. I love the idea on sucking on making films, spending 
        $6m for my first feature film, which is my masterpiece of course! The title of my 
        masterpiece, is "The Room" very catchy right? No, I did not hit her! I did not hit 
        her! I did NOT!</p> 
       <p> 
        <a class="btn btn-primary btn-large">Watch Movie</a>`enter code here` 
       </p> 
      </div> 
     </div> 
     <!-- second row --> 
     </div> 
    </div> 
    </div></body>

источник

2013-06-28 11:36:49

Twitter Загрузочный контейнерный контейнер не сбалансирован по центру

ответ

Смежные вопросы