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 - 跨度列显示不正确

回答

相关问题