4

初めて Bootstrap を試してみました。コードは次の例に基づいています。

http://twitter.github.com/bootstrap/examples/starter-template.html

私は基本的にメイン コンテンツの HTML コードをコピーしましたが、私のバージョンではレスポンシブ ナビゲーション バーが機能せず、「ハンバーガー ボタン」をクリックしてもナビゲーション要素が表示されません。

私のコード:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="css/main.css" rel="stylesheet" media="screen">
  </head>
  <body>

  <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">

      <h1>Hello, world!</h1>

    </div> <!-- /container -->

    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
  </body>
</html>

私のブートストラップ ファイルは、Bootstrap カスタマイズ サイトからのものです。レスポンシブナビゲーションバーを含むすべてをビルドに含めました。

どこが間違っているのですか。

みんな、ありがとう。

アップデート

main.css ファイルを削除したので、競合はありません。twitter.github.com/bootstrap/customize.htmlのすべてにチェックを入れて、カスタマイズページからブートストラップを再度ダウンロードしようとしましたが、それでも同じ問題が発生します。それが私に与えるcssファイルは、bootstrap-combined.cssではなく、単にbootstrap.cssと呼ばれています。ブートストラップのカスタマイズ ページに問題はありますか??

4

1 に答える 1

1

これをチェックしてください： http://jsfiddle.net/panchroma/4XEnD/

私はあなたの正確な html を取り、CSS と JS の CDN バージョンを使用しています。 

http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css
http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js

レスポンシブ ブートストラップ CSS を使用していること、Bootstrap js ファイルがロードされていること、および main.css に競合を引き起こしているものがないことを再確認してください。

幸運を！

于 2013-02-12T16:39:13.560 に答える