Bootstrap 3 でナビゲーション バーを作成しようとしています。しかし、ナビゲーション バー セクションから最初の例をコピーすると、最初は大きな画面で完全に非表示になっているナビゲーション バーが表示されます。次に、画面を小さくすると、モバイル (スタック) バージョンが最小化されます。したがって、どちらの場合も、ナビゲーション バーは非表示になります。
クラスを削除しようとするとcollapse、大画面で表示されますが、モバイル デバイスでも表示されます (スタック バージョン)。
大画面で表示し、モバイル デバイスで非表示にするにはどうすればよいですか?
次の HTML (jade テンプレート構文) を使用します。
nav.navbar(role='navigation)
.navbar-header
button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-ex1-collapse')
span.sr-only
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href='/')
img(src='/images/logo.png')
.collapse.navbar-collapse.navbar-ex1-collapse
ul.nav.navbar-nav
li: a(href='/') Link 1
li: a(href='/') Link 2
li.dropdown
a.dropdown-toggle(href='/', data-toggle='dropdown') Dropdown <b class="caret"></b>
ul.dropdown-menu
li: a(href='/') Action
li: a(href='/') Another action
li: a(href='/') Something else here