引導3.0中的浮動跨度

我已經使用Bootstrap的前一版本，並沒有問題，但我試着用3.0，我的類只是躺在彼此的頂部，而不是從開始移動到正確，什麼我做錯了嗎？引導3.0中的浮動跨度

我跟着本教程http://www.w3resource.com/twitter-bootstrap/grid-system-tutorial.php，甚至複製它，因爲它使我瘋了，但它甚至沒有工作。

這是我目前的HTML

<!DOCTYPE html> 
<html> 
<head> 
<title>Twitter</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<!-- Bootstrap --> 
<link href="./css/bootstrap.min.css" rel="stylesheet" media="screen"> 
<link href="./css/global.css" rel="stylesheet" media="screen"> 

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
<!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 
<![endif]--> 
</head> 
<body> 
<div class="container"> 
    <div class="row"> 
    <nav class="navbar" role="navigation"> 

     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#emproium-navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Branding</a> 
     </div> 

<div class="collapse navbar-collapse" id="emproium-navbar-collapse"> 
<ul class="nav navbar-nav"> 
    <li><a href="#">Core Collection</a></li> 
    <li><a href="#">Antiques</a></li> 
    <li><a href="#">Art</a></li> 
    <li><a href="#">Furniture</a></li> 
    <li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home Decor <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
     <li><a href="#">Rugs</a></li> 
     <li><a href="#">Throws</a></li> 
     <li><a href="#">Quilts</a></li> 
     <li><a href="#">Accent Pillows</a></li> 
     <li class="divider"></li> 
     <li class="dropdown-header">Nav header</li> 
     <li><a href="#">Separated link</a></li> 
     <li><a href="#">One more separated link</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Cart</a></li> 
    <li><a href="#">Contact</a></li>   
</ul> 
</div><!-- /.navbar-collapse --> 
</nav> 


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

<div class="tile span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div> 
<div class="tile span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div> 
<div class="tile span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div> 

</div><!-- end of row--> 
</div><!-- container --> 


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://code.jquery.com/jquery.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="./js/bootstrap.min.js"></script>

這是我完整的代碼，如果有人能指出這裏有什麼問題我會很感激。我相信這很簡單。

強尼

來源

2013-11-05 Jonnny

跨度*已被取代的COL-XS | S M | MD | LG- *命名。只是看你的代碼，這可能是你遷移到BS3的主要問題。請參閱http://getbootstrap.com/getting-started/#migration瞭解已更改內容的完整列表。

來源

2013-11-05 03:34:14

我只是想說我找到了問題，就是這樣。我閱讀Bootstrap文檔，因爲我正在看的教程似乎適用於較老的類命名系統。謝謝你的確認。 – Jonnny

引導3.0中的浮動跨度

回答

相關問題