Twitter Bootstrap - 跨度列顯示不正確

我正在嘗試使用Twitter Bootstrap，但由於某種原因，我做的任何事情都會導致跨越整個頁面的div。因此，我無法使網格系統/導航欄看起來正確，因爲每個div似乎都有自己的路線。Twitter Bootstrap - 跨度列顯示不正確

我相信這是一個簡單的修復，但我完全困惑。

http://jsfiddle.net/Aq5xn/show/

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title> 
      @section('title') 
       Page Title 
      @show 
     </title> 
     {{-- Ensures proper rendering & touch zooming --}} 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

     {{-- HTML::style('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css') --}} 
     {{ HTML::style('/css/bootstrap.css') }} 
     {{ HTML::style('/css/style.css') }} 
    </head> 
<body> 

    <div class="navbar navbar-fixed-top navbar-inverse"> 
     <div class="navbar-inner"> 
     <div class="container-fluid"> 
      <a class="brand" href="#">asdf</a> 
      <div class="nav-collapse"> 
      <ul class="nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#about">About</a></li> 
       <li><a href="#contact">Contact</a></li> 
      </ul> 
      <p class="navbar-text pull-right">Logged in as <a href="#">username</a></p> 
      </div><!--/.nav-collapse --> 
     </div> 
     </div> 
    </div> 


    <div class="container-fluid"> 
     <div class="row-fluid"> 
      <div class="span4">{{-- @yield('content') --}}</div> 
      <div class="span4">Span 4</div> 
      <div class="span4">Span 4</div> 
     </div> 
    </div> 
    {{-- Scripts are placed here --}} 
    {{ HTML::script('//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js') }} 
    {{ HTML::script('//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js') }} 

    </body> 
</html>

Bootstrap not working

來源

2013-08-30 Gravy

也是除了下面的答案，你拼寫錯誤的流體在容器類。 –

並且您假設在CSS中調用了兩個引導版本，請刪除本地副本或CDN版本。檢查你是不是在本地使用bootstrap 2.3.2，並調用3.0 - 這會讓事情變得非常迅速。 –

@RyanMcDonough {{ - - }}是一個刀片模板評論。因此，我不打電話2版本。 – Gravy

你很困惑Bootstrap 2.3.2與Bootstrap 3.0.0。您可以在CHANGELOG中找到有關遷移詳細信息中概述的差異。看着你的代碼，我看到navbar-inner類已被刪除，container-fluid已被替換爲container，row-fluid等。

基本上，您使用的Bootstrap 2.3.2代碼與新的Bootstrap 3.0.0引擎...沒有遷移。按照上述鏈接中列出的說明，瞭解您需要更改以及如何更改。

PS：由於3.1版本，你仍然可以使用.container-fluid，你只需要使用.row類與標準集裝箱。即使版本號爲3.0，這可能仍然是這種情況，但我可能誤解了文檔。

來源

2013-08-30 07:43:37

這就解釋了爲什麼我嘗試的教程中沒有一個看起來不工作！ – Gravy

是的，新版本在我學會了良好的引導程序之後出現了，現在我必須再次學習它^^「@Gravy無論如何，bootstrap非常簡單，您並不需要教程，只需選擇你需要的組件，並將它們放在你的頁面中，你將以更快，更快的方式學習：D –

請做你正在使用引導3.0.0注。

跨度類不再使用。更改爲.col-md- *，請在下面的鏈接中閱讀詳細信息。

http://getbootstrap.com/css/#grid-options

，如果你仍然希望使用跨度類。請將其還原爲Bootstrap 2.3.2。

來源

2013-08-30 07:43:27 Kooki3

試試這個自舉3 http://getbootstrap.com：

<nav class="navbar navbar-inverse shadow main-menu" role="navigation"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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">asdf</a> 
    </div> 
<div style="height: auto;" class="navbar-collapse navbar-ex1-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li><a href="#">Separated link</a></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li><a href="#">Separated link</a></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </nav>

來源

2013-08-30 07:44:59

Twitter Bootstrap - 跨度列顯示不正確

回答

相關問題