0

3 つのリンクを含むナビゲーション バーをコーディングしました。ナビゲーション バーはレスポンシブである必要があります。つまり、ウィンドウが十分に小さくなると、リンクが消え (実際にそうであるように)、3 本の水平線を持つ新しいボタンが表示されます (実際には表示されません)。

<nav class="navbar navbar-fixed-top" role="navigation">
    <div class="navbar-inner">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">

                <button type="btn btn-navbar" class="navbar-toggle"
                    data-toggle="collapse"
                    data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span> <span
                        class="icon-bar"></span> <span
                        class="icon-bar"></span> <span
                        class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/server">APL</a>
            </div>


            <!-- Collect the nav links, forms, and other content for toggling -->
            <div
                class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="impressum.html">Impressum</a></li>
                    <li class="active"><a href="documentation.html">Documentation</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

次の JSFiddle デモのボタンが非表示のままになるのはなぜですか (同じマークアップ)?

http://jsfiddle.net/BaR3q/22/

4

4 に答える 4

7
于 2013-09-03T19:55:26.997 に答える
0

あなたのメニュー コードをボイラープレートの BS3 ナビゲーション バー テンプレートに挿入すると、機能します。Firefox 17、Chrome 29、および IE8 でテスト済み (私の環境では IE8 をサポートする必要があるため、それに関する情報も含めました)。他に必要なものやご不明な点がございましたら、お知らせください。

更新: JSFiddle デモ

<!DOCTYPE HTML>

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Bootstrap Sample</title>

<link rel="stylesheet" href="css/bootstrap.min.css">

<script src="js/jQuery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--
SET UP THE FOLLOWING FOR YOUR ENVIRONMENT IF YOU WANT TO SUPPRT IE8.
See https://github.com/scottjehl/Respond for more. Note that the Respond.js script 
will not function locally in IE8 due to browser security restrictions.
-->
<script src="js/respond.min.js"></script>
<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body>

    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="btn btn-navbar"
                class="navbar-toggle"
                data-toggle="collapse"
                data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/server">APL</a>
        </div>

        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li><a href="impressum.html">Impressum</a></li>
                <li><a href="documentation.html">Documentation</a></li>
            </ul>
        </div>
    </nav>

</body>
</html>
于 2013-09-12T17:34:42.933 に答える
0

これは JsFiddle の問題です。

Bootstrap-3ナビゲーションバーを備えたこれをすでに入手しています。コードは完全に機能します。空のファイルで試すことができます。Bootstrap-3 navbar の例をコピーして貼り付けて、問題を確認することもできます。

動作中の JSBin。

于 2013-09-10T15:24:50.440 に答える