【Bootstrap4】navbarを2段にしてみた。自宅でお小遣い稼ぎをしたい主婦がアプリリリースを目指すブログです。この広告は、90日以上更新していないブログに表示しています。2017-06-03【Bootstrap4】navbarを2段にしてみた。こんにちは、マリンです。おひさしぶりになってしまいました。仕事獲得のために動いてまして・・・つまり何も進展がなくて書くことがなかっただけです。今回「既存のHPを自由にレスポンシブしちゃって!」と言うとある課題を頂きましたので、その時に行った表題の件です。基本、ホームページのスタイリングにはBootstrap4を使っております。デフォルトのnavですが、ご存知の通りnavbar-brand含め左寄せです。広い時はロゴを上段、ナビを下段。狭い時はインラインにしたいと思いました。ついでにナビを中央揃えにします。none;じゃ上手くいかない!いろいろ調べたのですが、Bootstrap3でのやり方ばかりで4の情報がなく、それでは上手くいかなくて困り果てた挙句、本家のソースを見に行きました。flex;を使っているのでこいつが使えないのですね。flex;とは?CSS3から導入されたレイアウトモードです。これまでfloatなどを使ってコンテンツをレイアウトしていたものを、より柔軟に、かつ簡単にレイアウト出来るようになりました。レスポンシブデザインでも便利そうです。詳しくはこちらをご覧ください。www.webcreatorbox.comまだ対応していないブラウザもあるようなのでご注意ください!navbarを2段にする方法では本題です。クラスを追加するスタイルの上書きのためのclassを追加します。追加するのはナビの一番の親に当たる<nav>です。gnav">最後のgnavがそれです。スタイルを上書きする追加したクラスにスタイルをあてます。カラムをどの方向に並べるかを指定するプロパティです。文を改行した時に向う方向に並べます。わかりにくですが、通常上から下です。値については他にもいろいろあるので調べてみてください。詳しくはこちらをご覧ください。http://scene-live.com/page.php?page=57navを中央揃えにする無事2段にはできましたが、このままでは「ロゴが中央なのにナビは左寄せ」という現象が起きます。(理由は後ほど)なのでナビを中央揃えにします。ulの幅を100%にするナビのリストを囲っているulの幅を100%にしてください。100%;}これをやらないとこの後の処理をいくらやっても真ん中に入ってくれません。クラスを追加する中央寄せにするためのclassを追加します。navbar-justified">最後のnavbar-justifiedがそれです。スタイルを上書きする追加したクラスにスタイルをあてます。コンテンツの横方向の位置を指定するプロパティです。このほかに均等配置にするspace-betweenなどいろいろあります。詳しくはこちらをご覧ください。http://scene-live.com/page.php?page=59これで無事に完了です!ロゴが中央なのにナビは左寄せ前にお話ししたこれです。space-between;が指定されています。<ul>についてるクラスのnavbar-navにはついていません。そのため、<ul>の範囲外のnavbar-brandであるロゴは中央配置になったのですね。原因1に気づいて一生懸命指定しましたが、最初うまくいきませんでした。そこでデベロッパーツールで見てみると、<ul>が左に寄って、かつ幅が狭かったのです。その幅の中で真ん中にはなっているけど、そもそもの幅が狭かったせいで全体の中央にこなかったのですね。思ったようにならない時は元のソースを見ることも必要ですね。最終的なコードを載せておきます。この記事を書いた当時のコードが残っていなかったことと、Bootstrapのバージョンが上がったことで多少当時と変わっています。付け焼き刃で急いで試したもので、改善が必要な点が多々あります。後述しますのでそちらの注意もご覧ください。columnが効きませんでした。navについている.navbar-expand-lgと言うクラスのflex-directionが優先されているからと思われます。!importantでいけるかと思いましたが、私の環境ではうまくいきませんでした。自動的に真ん中に寄ってくれました。今回は削除してあります。<注意点>上記のコードでは画面を小さくした時のハンバーガーまで2段の中央寄せになってします。コンテンツの位置を手軽に設定できるjustify-content-~が使えると便利かと思ったのですが、そちらは効きませんでした。これらの改善点も一緒し修正したかったのですが、まずは早急に補足を書きたかったので至らない点が多々あり申し訳ありません。試してみてきちんと記事を書こうと思います。23:50【Bootstrap4】navbarを2段にしてみた。~イベントによって表示・非表示を切り替える~こんにちは、マリンです。今回はボタンクリックなどのイベント...2017-11-08【CSS】セレクタの指定方法まとめこんにちは、マリンです。プラグインのCSSのコードを読んでて...2017-03-06Bootstrapで画像をレスポンシブ対応にする。こんにちは、マリンです。閲覧用サイトもそろそろ完成です。...2017-03-02スタイル整えるのホント難しい!!【Bootstrap】こんにちは、マリンです。RSpecを学んでいて気付いた自分の弱点。»プロフィールid:song-of-life1352607アラサーで思い立ってプログラミングを始めた主婦が、自宅でお小遣い稼ぎをしたいがために自作アプリのリリースを目指すブログです。【Git】ブランチ間違えてコミットしてた!?月別アーカイブ参加グループプログラミングはてなブログをはじめよう!song-of-life1352607さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。