我要做的就是在屏幕中间开始一些文字。
以下是代码。请注意,我已经在我的项目目录中包含了缩小的bootstrap css和js文件以及没有子目录的html文件。我从预编译的Bootstrap 3.0.1下载中获取了这些文件。我也尝试使用CDN的链接。仍然没有奏效。当我在Firefox中打开此代码时,我看不到任何有效的定位。其他Bootstrap样式也没有用,就像我试图做<p class = "large"> blah </p>
并且它没有使文本变大。
注意:为了方便人们测试页面,我将链接替换为本地引导程序文件,并带有指向引导程序CDN文件的链接。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
<!-- 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="row">
<div class="span3 offset9">
<p class="large">This Text</p>
</div>
</div>
<h1>Hello, world!</h1>
</body>
</html>
答案 0 :(得分:2)
在你的jsfiddle中,bootstrap的东西没有被正确使用,它只需要
<body>
<div class="row">
<div class="span9 offset3"><p>Seven thousand thousands of a thousand unique people</p></div>
</body>
和一些externe资源,http://jsfiddle.net/N5n4Z/1/,是一个Bootstrap 2骨架,你的例子就可以了,它可以工作。除非预览窗口很小。如果窗口很小,则由于其媒体查询而引导,会自动排列下面的所有行,并忽略每个偏移。
另外,为什么不使用新的Bootstrap 3? http://getbootstrap.com/
由于您现在使用Bootstrap 3,您必须稍微更改标记。
<div class="row">
<div class="col-md-6 col-md-offset-3">
<p>test loc</p>
</div>
答案 1 :(得分:0)
你忘了导入bootstrap的javascript部分。
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>