Twitter Bootstrap - Span Columns无法正确显示
Gra*_*avy 2 html css twitter-bootstrap
我正在尝试使用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,可能仍然如此,我可能误解了文档.