2014-11-02 48 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