[解決済み] BootstrapでNavbarが折りたたまれない
質問
Twitter Bootstrapで作ったサイトがあります。大きな画面ではナビバーがそのままきれいに表示されていますが、携帯電話で同じナビバーを見ると、ナビバーが折りたたまれません。
これは私のコードです。
<div class="container">
<div class="masthead">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="/" class="">Home</a></li>
<li><a href="goud-zilver.html">Oud goud en zilver</a></li>
<li><a href="koersen.html">Officiële koersen</a></li>
<li><a href="webshop/" target="_blank">Webwinkel</a></li>
<li><a href="diversen.html">Diversen</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
</div>
3つ目のクラスでは、nav-collapseも使ってみましたが、これも大きな画面では折りたたまれてしまいます。
どうすればいいですか?
はい、指示に従ってください。 ベティーストリートから (レスポンシブCSS、bootstrap-collapse.js、Transitionsプラグインを含む) update: (bootstrap-transition.js)とjQuery) . 崩壊のトリガーとなるボタン/リンクを追加する必要があります。このタグは次の属性を持ちます: data-toggle="collapse" data-target=".nav-collapse" ここで data-target には任意の CSS セレクタを指定することができます。data-targetで選択されたタグの間にナビを配置する、参照。 http://bootply.com/62921
html :
<div class="container">
<div class="masthead">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<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">
<li class="active"><a href="/" class="">Home</a></li>
<li><a href="goud-zilver.html">Oud goud en zilver</a></li>
<li><a href="koersen.html">Officiële koersen</a></li>
<li><a href="webshop/" target="_blank">Webwinkel</a></li>
<li><a href="diversen.html">Diversen</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
</div>
</div>
</div><!-- /.navbar -->
</div>
</div>
更新 あなたのコードには Collapse プラグインが必要とする Transitions プラグイン (bootstrap-transition.js) が欠落しています。さらに重要なのは、jQuery が含まれていないことです。 これで動くはずです。 http://plnkr.co/l66QqCftGNsaG0xkBrUf
javascriptが含まれます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-collapse.js"></script>
注意:コンパイルされた(またはミニファイされた)バージョンの完全なJavaScriptsを含めることを考慮してください。
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
また、折りたたんだ後のスタイルも変更する必要があります。
.navbar .in .nav li {
display: block;
float: none;
width:100%;
}
関連
-
[解決済み] Bootstrapのモーダルが表示されない
-
[解決済み] Bootstrap 4.1のbd-highlightとは何ですか?
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] Twitter Bootstrapでナビバーの色を変更する
-
[解決済み] Bootstrapでdivの左寄せと右寄せをする
-
[解決済み] Twitter ブートストラップ スクロール可能なテーブル
-
[解決済み] Twitter Bootstrap: コンテナ内のdivを100%の高さにする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Bootstrap 2.3.2のGLYPHICONS
-
[解決済み] Bootstrap 4.1のbd-highlightとは何ですか?
-
[解決済み] B-tableのBootstrapVue条件列
-
[解決済み] twitterのbootstrapで五等分の列を作る
-
[解決済み】Twitter Bootstrapのポップオーバーを外側のクリックで解除する方法は?
-
[解決済み] Twitter Bootstrapを使用して垂直方向の空白を追加しますか?
-
[解決済み] Bootstrap 3 のスタックドタブ
-
[解決済み] Twitter Bootstrapのテーブルの幅が常に100%なのはなぜですか?
-
[解決済み] TwitterのPopoverでdivをコンテンツとして使用することは可能ですか?
-
[解決済み] Twitter Bootstrapのモーダルでエスケープキーを使って閉じる機能を有効にするにはどうしたらいいですか?