質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1163閲覧

Bootstrapのハンバーガーメニューの位置を画面の広さによって変えたい

tyobi

総合スコア18

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/03/20 07:52

編集2019/03/20 08:01

現在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要素なのが原因?)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Bootstrap4の.navbar-collapseはflexなので.justify-content-endを組み合わせることで右寄せできます。

html

1<div class="container-fluid my-3 hlist mr-0"> 2 <nav class="navbar navbar-expand-lg navbar-light justify-content-start bg-light" id="hnav1"> 3 <a href="#" class=""> 4 <img src="img/logo.jpg" alt="" width="30px" height="30px"> 5 </a> 6 <button class="navbar-toggler mx-3" type="button" data-toggle="collapse" data-target="#menu" aria-controls="#menu" aria-expanded="false"> 7 <span class="navbar-toggler-icon"></span> 8 </button> 9 <form id="form1" action="index.html" method="get"> 10 <input id="sbox1" type="search" name="s" value="" placeholder="探す"> 11 </form> 12 <div class="collapse navbar-collapse justify-content-end" id="menu"> 13 <ul id="hhlist" class="navbar-nav"> 14 <li class="nav-item"><a href="#" class="nav-link">ホストをはじめる</a></li> 15 <li class="nav-item"><a href="#" class="nav-link">ヘルプ</a></li> 16 <li class="nav-item"><a href="#" class="nav-link">登録する</a></li> 17 <li class="nav-item"><a href="#" class="nav-link">ログイン</a></li> 18 </ul> 19 </div> 20 </nav> 21</div> 22

上記コードではハンバーガーボタンの両脇が空くよう.ml-3の代わりに.mx-3としましたが、その辺は適宜書き換えてください。

投稿2019/03/20 15:47

cerfweb

総合スコア1899

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tyobi

2019/03/21 07:44

回答ありがとうございます。 justify-content-endを加えて、他のcssのflexの指定を解除したら、うまくいきました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問