Twitter bootstrap 第二轮。非常新的引导。教程代码不起作用_Twitter Bootstrap

Twitter bootstrap 第二轮。非常新的引导。教程代码不起作用

twitter-bootstrap

Twitter bootstrap 第二轮。非常新的引导。教程代码不起作用,twitter-bootstrap,Twitter Bootstrap,我不小心在早些时候发布了这篇未完成的文章，所以我删除了这篇文章并重新制作了它。这是完整的帖子来自W3的教程代码： <!DOCTYPE html> <html> <head> <title>Fixed layout example with Twitter Bootstrap</title> <meta name="viewport" content="width=device-width, initial-s

我不小心在早些时候发布了这篇未完成的文章，所以我删除了这篇文章并重新制作了它。这是完整的帖子

来自W3的教程代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Fixed layout example with Twitter Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
<div class="container">
    <div class="row">
      <div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>
      <div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>
      <div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>
    </div>
</div>
  <script src="http://code.jquery.com/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

问题是，教程说代码应该生成以下内容：

但是，当我运行它时，文本只会淹没屏幕，不会被容器捕获

您的代码不包括教程示例中的

行：

[...]
<body>
<div class="container">
<div class="row">
[...]

[…]
[...]

您从w3resource发布的链接使用的是Bootstrap v2.3.2

在当前的引导v3.0.0中，span被col-取代

应该是-

<div class="container">
    <div class="row">
      <div class="col-4"><p>...</p></div>
      <div class="col-4"><p>...</p></div>
      <div class="col-4"><p>...</p></div>
    </div>
</div>

我添加了container类，它确实做了一些事情，但最终没有按照教程建议的方式格式化文本。

<div class="container">
    <div class="row">
      <div class="col-4"><p>...</p></div>
      <div class="col-4"><p>...</p></div>
      <div class="col-4"><p>...</p></div>
    </div>
</div>