2014-11-02 84 views
-1

我的兩列布局堆疊在彼此的頂部,而不是並排坐在一起。爲什麼這些堆疊在彼此之上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 2014-11-02 03:27:06

+0

你的庫是Bootstrap版本2還是3? – DavidG 2014-11-02 03:28:18

回答

1

你有一堆不必要的div:

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

基本上,什麼應該是在某一行需要是相同rowrow-fluid容器內。這包括在文檔中:http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem