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 テスト2 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>
回答3件
あなたの回答
tips
プレビュー