現在Bootstrapの基礎を学習中の者です。
Bootstrapのリストの位置を開いている時とハンバーガーメニューの時で変えたいのですがうまくいきません。
html
1 2 3 <div class="container-fluid my-3 hlist mr-0"> 4 <a href="#" class=""> 5 <img src="img/logo.jpg" alt="" width="30px" height="30px"> 6 </a> 7 <form id="form1" action="index.html" method="get"> 8 <input id="sbox1" type="search" name="s" value="" placeholder="探す"> 9 <!-- <input id="sbtn1" type="submit" name="" value="検索"> --> 10 </form> 11 <!-- <a href="#" class="navbar-brand">navbar</a> --> 12 <nav class="navbar navbar-expand-lg navbar-light justify-content-start" id="hnav1"> 13 <button class="navbar-toggler ml-3" type="button" data-toggle="collapse" data-target="#menu" aria-controls="#menu" aria-expanded="false"> 14 <span class="navbar-toggler-icon"></span> 15 </button> 16 <div class="collapse navbar-collapse" id="menu"> 17 <ul id="hhlist" class="navbar-nav"> 18 <li class="nav-item"><a href="#" class="nav-link">ホストをはじめる</a></li> 19 <li class="nav-item"><a href="#" class="nav-link">ヘルプ</a></li> 20 <li class="nav-item"><a href="#" class="nav-link">登録する</a></li> 21 <li class="nav-item"><a href="#" class="nav-link">ログイン</a></li> 22 </ul> 23 </div> 24 </nav> 25 </div>
画面がlg以上の時はheader内の右端にリストを表示し、lgより小さいときはハンバーメニューをlogoと検索ボックスの間に表示するというのをやりたいのですが、うまくいきません。
試したこととしては、まずbuttonタグだけをnavタブの外に出してみましたがハンバーガーメニューが表示されなくなりました。次にnavタブで全体を囲む方法も試した結果、ハンバーガーメニューは目的の位置に表示されましたが、今度はnavbarを右寄せすることができなくなりました。(navbarがinline要素なのが原因?)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/21 07:44