0

我之前不小心把这个未完成的帖子发布了，所以我删除了帖子并重新制作了它。这是完整的帖子。

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>

我的文件结构：

|index.html
|bootstrap
    |
    |css
        bootstrap.css
        bootstrap.min.css
    |js
        bootstrap.js
        bootstrap.min.js

问题是教程说代码应该生成这个：http ://www.w3resource.com/twitter-bootstrap/fixed-layout-example.html

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

4

2 回答 2

2

您的代码不包括<div class="container">教程示例中的行：

[...]
<body>
<div class="container">
<div class="row">
[...]
于 2013-08-08T18:39:29.620 回答
0

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

在当前的 Bootstrap 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>

http://jsfiddle.net/xrsMb/

于 2013-08-08T19:50:08.197 回答