-
ID:gQ.PjL さんの質問

Twitter Bootstrapのcollapse時の挙動について質問です。モバイルでcollapseした際、headerより下部200pxほどが一切反応しなくなります。具体的にはコンテンツ上部の検索結果のリンクや検索ボックスが一切反応しません。画面上での表示・レイアウトには問題ありません。collapse時に、<div class="container-fluid" id="navfluid">内に表示される<div class="collapse navbar-collapse" id="navigationbar">が、headerより下にズレてしまい、表示されているコンテンツの上に被さってしまっているようです。丸一日ほどコードを調べていたのですが、どうしても解決できないので質問させていただきました。

以下のコードからは、余計な要素は省略してあります。bootstrapのcssを過去に改変したので、それが原因なのでしょうか?どうぞよろしくお願いいたします。

<nav class="navbar navbar-default" role="navigation" style="z-index:1;">
<div class="container-fluid" id="navfluid">
<div class="navbar-header">
<a href="/"><div class="navbar-brand navbar-siteTitle"></div></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<span class="sr-only">menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav navbar-right">
<li class="visible-xs">home</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

みんなの回答 2 件

ID:ghK.5U さんの回答

z-indexとかで何か上に乗っかってたりしない?

ID:gQ.PjL

ありがとうございます。試してみましたが、z-indexをつけないと、collapseしてない時のメニューが後ろに隠れてしまう一方、collapse時の問題は変わりません。

ID:ghK.5U

他の要素がz-indexで上に乗っかってないか?という意味です。

ID:gQ.PjL さんの回答

本日も、格闘していますが、引き続き、まったく分からず、、、どなたか分かりませんでしょうか。

ID:KQ7vHs

プレーンなBootstrapで試したが何も問題ない。トピ主が改造しておかしくしたと思われるんで、そこら辺を疑ってみること。

ID:gQ.PjL

さっそく、ほんとありがとうございます。だいぶありがたいです。了解しました。やってみます。

最終更新日:2015-03-18 (2,946 views)

関連するトピックス

ページ上部に戻る