1

Bootstrapに似たナビゲーション バーを作成しようとしています。彼らのサイトにアクセスしてブラウザのサイズを変更すると、. サイズを十分に狭くすると、上部のナビゲーション バーがボタンになります。ボタンをクリックすると、すべてが押し下げられ、完全なナビゲーションが再び表示されます。

それが私がこのjsfiddleで達成しようとしていることですが、次の問題があります。

  1. 最初は、ボタンは非表示になっていません。非表示にして、画面が狭すぎる場合にのみ表示されるようにする必要があります。
  2. (修正) ブートストラップのようにボタンに背景が表示されない
  3. (修正済み) ブラウザのサイズを変更してナビゲーションを非表示にし、ボタンをクリックします。次にサブメニューをクリックすると、サブメニュー項目がうまく表示されません。

問題 1 のスクリーン プリント:

ブラウザの幅が 940px を超えているため、ナビゲーション バーはまだ表示されません。 ブラウザの幅が 940px を超えているため、ナビゲーション バーはまだ表示されません。

ナビゲーションバーが表示されますが、ブラウザの幅が940px以下なので問題ありません ナビゲーションバーが表示されますが、ブラウザの幅が940px以下なので問題ありません

完全な HTML コード:

<html lang="en">
<head>
    <title></title>

    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" />


    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {    
        });
    </script>
</head>
<body>
    <div class="conatiner-fluid">
        <div class="row-fluid">
            <div class="span10">

                <a 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>
                </a>

                <div class="nav-collapse">
                    <ul class="nav nav-tabs">
                        <li><a href="#">Home</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown"
                                href="#">Help<b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Keep</a></li>
                                <li><a href="#">Screaming</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>

            </div>
        </div>
        <div class="row-fluid">
            <div class="span10">
                other content
            </div>
        </div>
    </div>
</body>
</html>
4

1 に答える 1

1

これはあなたが求めているものに近いですか？
http://jsfiddle.net/panchroma/R4BEY/

あなたの例には span10 div がありますが、これでどこに向かっているかわからなかったので、行を完成させるためにその後に span2 を追加しました。

HTMLは以下です。開始コンテナ div にタイプミスがあり、navbar と navbar-inner div がありませんでした。それが私が行った変更のすべてだったと思います。

幸運を

<div class="container-fluid"> 
<div class="row-fluid">
<div class="span10">

<div class="navbar">
<div class="navbar-inner">


<a 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>
 </a>

 <div class="nav-collapse collapse ">
    <ul class="nav nav-tabs">
      <li><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Help<b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Keep</a></li>
          <li><a href="#">Screaming</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div> <!-- end nav-collapse -->

 </div><!-- end nav bar inner -->  
 </div> <!-- end nav bar -->

</div><!--end span10 -->
<div class="span2">span 2</div>
</div><!-- end row -->


<div class="row-fluid">
<div class="span10">
  other content
</div>
<div class="span2">span 2</div>
</div>
</div>
于 2013-01-08T00:52:10.350 に答える