我正在尝试开始使用 Twitter Bootstrap，但出于某种原因，无论我做什么，都会产生一个横跨整个页面的 div。因此，我无法使网格系统/导航栏看起来正确，因为每个 div 似乎都有自己的行。
我确信这是一个简单的修复，但我完全感到困惑。
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 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 版本也是如此，我可能误解了文档。
关于html - Twitter Bootstrap - 跨度列显示不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18527466/