2014-11-02 2 views
-1

Мои два расположения столбцов складываются друг на друга вместо того, чтобы сидеть рядом.Почему эти укладки на вершине eachother Bootstrap Span

Может ли кто-нибудь помочь мне?

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="css/bootstrap-responsive.css"> 
    <link rel="stylesheet" href="css/bootstrap.css"> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
    <div class="row-fluid"> 
     <div class="span12"> 
      <div class="row-fluid"> 
       <div class="span8"> 
        <img src="img/banner-cat.png" /> 
       </div> 
      </div> 
      <div class="row-fluid"> 
       <div class="span4"> 
        <form class="form"> 
         <label for="name" class="col-sm-2 control-label"></label> 
         <input type="text" class="form-control" placeholder=" First Name"> 
         <label for="name" class="col-sm-2 control-label"></label> 
         <input type="text" class="form-control" placeholder=" Last Name"> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html> 
+1

Вы используете Bootstrap 2. Прочтите документы и посмотрите порядок файлов css и как использовать сетку. getbootstrap.com/2.3.2/ - есть примеры жидкостной сетки. – Christina

+0

Являются ли ваши библиотеки Bootstrap версии 2 или 3? – DavidG

ответ

1

У вас есть куча ненужных дивы:

<body> 
    <div class="row-fluid"> 
     <div class="span8"> 
      <img src="img/banner-cat.png" /> 
     </div> 
     <div class="span4"> 
      <form class="form"> 
       <label for="name" class="col-sm-2 control-label"></label> 
       <input type="text" class="form-control" placeholder=" First Name"> 
       <label for="name" class="col-sm-2 control-label"></label> 
       <input type="text" class="form-control" placeholder=" Last Name"> 
      </form> 
     </div> 
    </div> 
</body> 

В принципе, все, что должно быть в строке должна быть в пределах одной и той же row или row-fluid контейнера. Это описано в документации: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

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