1

我要做的就是让一些文本在屏幕中间开始。

这是下面的代码。请注意，我在项目目录中包含了缩小的引导 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>
4

2 回答 2

2

在你的 jsfiddle 中，没有正确使用引导程序，它所需要的只是

<body>
    <div class="row">
    <div class="span9 offset3"><p>Seven thousand thousands of a thousand unique people</p></div>
</body>

和一些外部资源http://jsfiddle.net/N5n4Z/1/是一个 Bootstrap 2 框架，其中包含您的示例，并且可以正常工作。好吧，除非预览窗口太小。如果 Window 很小，引导程序，由于它的媒体查询，会自动排列下面的所有行，并忽略每个偏移量。

顺便说一句，为什么不使用新的 Bootstrap 3？http://getbootstrap.com/

更新

由于您现在使用 Bootstrap 3，因此您必须稍微更改标记。

<div class="row">
    <div class="col-md-6 col-md-offset-3">
    <p>test loc</p>
</div>

小提琴
引导文档

于 2013-11-06T10:24:30.300 回答
0

您忘记导入引导程序的 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>
于 2014-07-11T04:34:31.907 回答