twitter-bootstrap 引导程序不起作用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19809082/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 19:06:02  来源:igfitidea点击:

Bootstrap not working

csstwitter-bootstrap

提问by macsplean

All I am trying to do is to get some text to begin in the middle of the screen.

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

Here is the code below. Note that I have included the minified bootstrap css and js files in my project directory along with my html file without subdirectories. I got those files from the precompiled Bootstrap 3.0.1 download. I also tried using the links to the CDN instead. Still didn't work. When I open this code in Firefox I don't see any positioning active at all. Other Bootstrap styles didn't work either, like I tried to do <p class = "large"> blah </p>and it didn't make the text large.

这是下面的代码。请注意,我已经在我的项目目录中包含了缩小的引导 css 和 js 文件以及我的 html 文件,而没有子目录。我从预编译的 Bootstrap 3.0.1 下载中获得了这些文件。我还尝试使用指向 CDN 的链接。还是没用。当我在 Firefox 中打开此代码时,我根本看不到任何定位处于活动状态。其他 Bootstrap 样式也不起作用,就像我尝试做的那样<p class = "large"> blah </p>,它没有使文本变大。

NOTE: To make it easier for people to test the page, I replaced links to local bootstrap files with a link to the bootstrap CDN file.

注意:为了让人们更容易测试页面,我将本地引导文件的链接替换为引导 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>

回答by ZimTis

in your jsfiddle, the bootstrap stuff isn't correctly used, all it needs is

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

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

and some externe resouces, http://jsfiddle.net/N5n4Z/1/, is a Bootstrap 2 skeleton, with your example in it, and it work. Well unless the preview window is to small. If the Window is to small, bootstrap, due to its media querys, automatically arrange all rows underneath, and ignore every offset.

和一些外部资源,http://jsfiddle.net/N5n4Z/1/,是一个 Bootstrap 2 骨架,里面有你的例子,它可以工作。好吧,除非预览窗口很小。如果窗口很小,引导程序,由于它的媒体查询,自动排列下面的所有行,并忽略每个偏移量。

On a side note, why not using the new Bootstrap 3? http://getbootstrap.com/

附带说明一下,为什么不使用新的 Bootstrap 3?http://getbootstrap.com/

Update

更新

Since you use Bootstrap 3 now, you have to change the markup a bit.

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

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

fiddle
bootstrap docu

小提琴
引导程序文档

回答by Hyman

You forgot to import the javascript part of bootstrap.

您忘记导入 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>