Twitter Bootstrap 2 navbar を Bootstrap 3 に移行しようとしています。navbar には 3 つの部分があります。
「myContent1」と「myContent2」は常に表示されます。「myContent3」は小さい画面では折りたたまれます。しかし、小さな画面のデバイスで積み重ねられたボタンをクリックすると、折りたたまれたメニューが開きません。ボタンをクリックしても何も起こりません。
私はそれをフィドルに入れた:http://jsfiddle.net/mavent/LDP8K/6/
<nav class="navbar navbar-inverse navbar-fixed-top navbar-sam-main" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand navbar-left" href="" title="aaaa" id="MyContent1">
MySite
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-mycol">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav navbar-left" id="myContent2">
<li class="dropdown" id="users">
<a class="navbar-brand" href="" title="aaa" style="display:inline-block;padding-right:0px;">
<img src="" width="24" height="24" alt="aaaa">
MyName
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#users" style="display:inline-block;padding-left:0px;">
<b class="caret" style="border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #999;"></b>
</a>
<ul class="dropdown-menu">
<li><a href=""><img src="" width="24" height="30"/> OtherName</a></li>
<li class="divider"></li>
<li><a href="">AAAA</a></li>
<li><a href="">BBB</a></li>
</ul>
</li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-mycol">
<ul class="nav navbar-nav navbar-right" id="myContent3">
<li><a href="">UUUU</a></li>
<li><a href="">YYYYY</a></li>
<li class="dropdown" id="wer">
<a class="dropdown-toggle" data-toggle="dropdown" href="#wer">Tools
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="">aaaa</a></li>
<li><a href="">bbbb</a></li>
<li><a href="">cccc</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
編集:ある人の提案で、「トグルボタン」をnavbar-header
セクションの外に置きました。そしてtop:0 and right:0
、ボタンに絶対的なスタイルを与えました。ただし、その場合、画面が非常に小さい場合、myContent2
ボタンに突き刺さります。次からその動作を確認できます: http://jsfiddle.net/mavent/paXt9/2/
Edit2:この動作が必要です:
大画面の場合、すべてが表示されます。
小さい画面でmyContent2
は、表示され、myContent3
折りたたまれています。myContent3
ボタンをクリックすると折りたたまれません。
非常に小さい画面の場合myContent2
は、次の行に表示されます。そのmyContent2
ため、ボタンが互いに競合することはありません。