Q&A
別ファイルでこの部分だけ表示しても同じ現象が出るんですか？
bootstrap 4を利用し、レスポンシブで製作しています。
デベロッパーツールでモバイルの状態を確認すると、いずれのデバイスで確認しても、画面がはみ出てしまい、左右にスクロールしないと全画面見ることができません。コードの誤りをご指摘頂けますと助かります。
html
1<header> 2 <div class = "container-fluid"> 3<div class = "row"> 4<div class = "header clearfix"> 5 <nav class = "navbar navbar-light bg-faded navbar-fixed-top"> 6 <div class = "col-xs-2"> 7 <a class="navbar-brand" href="/">TOP</a> 8 </div> 9 <ul class = "nav navbar-nav finetune"> 10 <div class = "col-md-10 hidden-sm-down"> 11 <li class = "nav-item active"> 12 <a class="misaki-top-link" href="/profile">プロフィール</a> 13 </li> 14 <li class = "nav-item"> 15 <a class="misaki-top-link" href="/course">コース紹介</a> 16 </li> 17 <li class = "nav-item"> 18 <a class="misaki-top-link" href="/lessons">講義予定・実績</a> 19 </li> 20 <li class = "nav-item" > 21 <a class="misaki-top-link" href="#">お問い合わせ</a> 22 </li> 23 <li class = "nav-item aaa"> 24 <a href = "https://www.instagram.com/faceyogamisaki/?ref=badge" class="ig-b- ig-b-24"> 25 <img src="//badges.instagram.com/static/images/ig-badge-24.png" alt="Instagram" /> 26 </a> 27 </li> 28 </div> 29 </ul> 30 <button class="navbar-toggler hidden-md-up col-md-10 pull-xs-right" 31 type="button" data-toggle="collapse" data-target="#collapseone" 32 aria-expanded="false" aria-controls="collapseExample">☰ 33 </button> 34 <div class="row"> 35 <div class="col-xs-12"> 36 <div class="collapse" id="collapseone"> 37 <table class="table"> 38 <tbody> 39 <tr><td> 40 テスト 41 </td></tr> 42 <tr><td> 43 テスト２ 44 </td></tr> 45 <tr><td> 46 テスト 47 </td></tr> 48 </tbody> 49 </table> 50 </div> 51 </div> 52 </div> 53 </nav> 54</div> 55</div> 56</div> 57</header>
コメント有難う御座います。windowを小さくする分には問題ないのですが、デベロッパーツールで見るとこの現象が起きます。別ファイルに該当部分のみ複写して試して見ます。
回答3件
0
divの閉じタグが一個多いような気がします。
HTML
1<header> 2 <div class = "container-fluid"> 3 <div class="row"> 4 <div class="header clearfix"> 5 <nav class="navbar navbar-light bg-faded navbar-fixed-top"> 6 <div class="col-xs-2"> 7 <a class="navbar-brand" href="/">TOP</a> 8 </div> 9 10 <ul class="nav navbar-nav finetune"> 11 <div class="col-md-10 hidden-sm-down"> 12 <li class="nav-item active"> 13 <a class="misaki-top-link" href="/profile">プロフィール</a> 14 </li> 15 <li class="nav-item"> 16 <a class="misaki-top-link" href="/course">コース紹介</a> 17 </li> 18 <li class="nav-item"> 19 <a class="misaki-top-link" href="/lessons">講義予定・実績</a> 20 </li> 21 <li class="nav-item" > 22 <a class="misaki-top-link" href="#">お問い合わせ</a> 23 </li> 24 <li class="nav-item aaa"> 25 <a href="https://www.instagram.com/faceyogamisaki/?ref=badge" class="ig-b- ig-b-24"> 26 <img src="//badges.instagram.com/static/images/ig-badge-24.png" alt="Instagram" /> 27 </a> 28 </li> 29 </div> 30 </ul> 31 32 <button class="navbar-toggler hidden-md-up col-md-10 pull-xs-right" type="button" data-toggle="collapse" data-target="#collapseone" aria-expanded="false" aria-controls="collapseExample"> 33 ☰ 34 </button> 35 <!-- これが不要 </div> --> 36 <div class="row"> 37 <div class="col-xs-12"> 38 <div class="collapse" id="collapseone"> 39 <table class="table"> 40 <tbody> 41 <tr><td> 42 テスト 43 </td></tr> 44 <tr><td> 45 テスト２ 46 </td></tr> 47 <tr><td> 48 テスト 49 </td></tr> 50 </tbody> 51 </table> 52 </div> 53 </div> 54 </div> 55 </nav> 56 </div> 57 </div> 58 </div> 59</header>
投稿2016/11/20 13:03
退会済みユーザー
総合スコア0
有難う御座います。
divの数の管理、増えると混乱しますね、、、
ご指摘の点、修正したのですが（質問にも修正したhtmlに変更しました）やはり治りません。。。
あれ、直りませんでしたか？ 当方の環境だと直ったようなのですけど。
じゃあ、他の原因かもしれませんね……。
ちなみに、タグの入れ子が発生していてややこしい場合は、閉じタグの後ろに対応する開きタグのクラス名やID名を<!-- .row -->みたいな形のコメントで書いておくと少しわかりやすくなりますよ。
<div class="container-fluid">
<div class="row">
...
</div><!-- .row -->
</div><!-- .container-fluid -->
ブラウザのwindowを小さくしていく分には問題なく動くのですが、ディベロッパーツールで見るとはみ出てしまいます・・・もう少しいろいrいじってみたいと思います。有難う御座いました！
0
デプロイしたところ、問題ありませんでした。
ローカルでは相変わらず修正されませんが、一旦クローズします。
見て頂いた方、有難う御座いました。
投稿2016/11/27 11:12
総合スコア132
0
自己解決
ローカル環境では相変わらずですが、デプロイしたとことスマホで問題なくなく表示されました。
原因は未だ不明ですが、一旦クローズ致します。見て頂いた方、ありがとう御座いました。
投稿2016/11/27 11:08
総合スコア132
あなたの回答
tips
プレビュー
