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 に答える