bootstrap4のナビバーのレイアウトについて教えて下さい。

前提・実現したいこと

①画面サイズmd以上の時に、メルカリの様にナビバー内のボタンや検索フォームを中央に揃えたいです。
②画面サイズsm以下の時に、検索フォーム横のボタンがグリッドしてしまうのを防ぎたいです.

該当のソースコード

html
1
2
3<!doctype html>
4<html lang="ja">
5<head>
6    <!-- Required meta tags -->
7    <meta charset="utf-8">
8    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
9    <!-- Bootstrap CSS -->
10    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
11          integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
12    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
13    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
14    <title>ほげほげ - Topページ</title>
15</head>
16<body>
17
18<!-- ナビバーデザインテストー -->
19<nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
20    <div class="row">
21        <div class="col-4 col-md-4 order-md-0">
22            <a class="navbar-brand" href="/">ほげほげ</a>
23            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
24                <span class="navbar-toggler-icon"></span>
25            </button>
26        </div>
27        <div class="col-8 col-md-8 order-md-3">
28            <div class="float-right">
29                <button type="button" class="btn btn-primary">テスト</button>
30                <button type="button" class="btn btn-primary">ログイン</button>
31                <button type="button" class="btn btn-primary">会員登録</button>
32            </div>
33        </div>
34        <div class="col-12 col-md-8 order-md-1">
35            <form class="form-inline my-2 my-lg-0" action="/search" method="get" accept-charset="utf-8">
36                <input type="search" class="form-control mr-sm-2" placeholder="キーワードで検索" name="q" aria-label="検索...">
37                <button type="submit" class="btn btn-outline-info my-2 my-sm-0">検索</button>
38            </form>
39        </div>
40        <div class="col-md-4 order-md-2">
41            <button type="button" class="btn btn-primary">カテゴリー</button>
42        </div>
43    </div>
44</nav>
45
46
47
48<!-- 本番一時コメントアウトー -->
49<!--
50<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
51      <a class="navbar-brand" href="/">ほげほげ</a>
52      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
53        <span class="navbar-toggler-icon"></span>
54      </button>
55
56
57      <div class="collapse navbar-collapse" id="navbarSupportedContent">
58        <ul class="navbar-nav mr-auto">
59          
60          <li class="nav-item">
61            <a class="nav-item nav-link" href="/login/">
62            ようこそ、ゲストさん！ログインはこちら
63          </a>
64          </li>
65          
66        </ul>
67          <div class="btn-group">
68              <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
69                  スキルで絞り込む
70              </button>
71              <form class="form-inline my-2 my-lg-0" action="" method="get" accept-charset="utf-8">
72                  <div class="dropdown-menu">
73                      <button class="dropdown-item" type="submit" value="1" name="q">ほげほげ</button>
74                      <button class="dropdown-item" type="submit" value="2" name="q">ほげほげ</button>
75                      <button class="dropdown-item" type="submit" value="3" name="q">ほげほげ</button>
76                      <button class="dropdown-item" type="submit" value="4" name="q">ほげほげ</button>
77                      <button class="dropdown-item" type="submit" value="5" name="q">ほげほげ</button>
78                      <button class="dropdown-item" type="submit" value="6" name="q">ほげほげ</button>
79                      <button class="dropdown-item" type="submit" value="7" name="q">ほげほげ</button>
80                      <button class="dropdown-item" type="submit" value="8" name="q">ほげほげ</button>
81                  </div>　<!--/.dropdown-menu -->
82
83              </form>
84          </div><!-- /.btn-group -->
85          <form class="form-inline my-2 my-lg-0" action="/search" method="get" accept-charset="utf-8">
86              <input type="search" class="form-control mr-sm-2" placeholder="キーワードで検索" name="q" aria-label="検索...">
87              <button type="submit" class="btn btn-outline-info my-2 my-sm-0">検索</button>
88          </form>
89      </div>
90</nav>
91
92<!-- top画像ー -->
93<img class="img-fluid" src="/media/freelanze-top-image.png" style="margin-top: 55px">
94<main>
95    <!-- メインコンテンツ -->
96    <div class="container mt-auto">
97        
98
99<div class="container-fluid">
100    <div class="row">
101        <div class="col-12" style="mx-auto">
102            <p class="text-center"><span class="bg-white text-primary">＼新着フリーランス一覧／</span></p>
103        </div>
104    </div>
105</div>
106
107<!--表示カード調整中-->
108<div class="container">
109  <div class="row">
110       
111        <div class="col-6 col-md-3  mb-3">
112            <div class="card" style="width: 100%;">
113                
114                <img class="card-img-top" src="/media/media/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2020-09-25_11.18.46.png">
115                
116                <div class="card-body">
117                    <h6 class="card-skill">ほげほげ</h6>
118                    <p class="card-text">100,000円〜</p>
119                </div>
120            </div>
121        </div>
122       
123        <div class="col-6 col-md-3  mb-3">
124            <div class="card" style="width: 100%;">
125                
126                <img class="card-img-top" src="/media/media/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2020-09-25_17.52.52.png">
127                
128                <div class="card-body">
129                    <h6 class="card-skill">ほげほげ</h6>
130                    <p class="card-text">50,000円〜</p>
131                </div>
132            </div>
133        </div>
134       
135        <div class="col-6 col-md-3  mb-3">
136            <div class="card" style="width: 100%;">
137                
138                <div class="card-body">
139                    <h6 class="card-skill">ほげほげ</h6>
140                    <p class="card-text">〜10,000円</p>
141                </div>
142            </div>
143        </div>
144       
145  </div>
146</div>
147
148<!--ページネーション↓-->
149<nav aria-label="Page navigation">
150<ul class="pagination justify-content-end">
151    <!-- 前へ の部分 -->
152    
153    <!-- 数字の部分 -->
154    
155        
156            <li class="page-item active"><a class="page-link" href="#!">1</a></li>
157        
158    
159    <!-- 次へ の部分 -->
160    
161</ul>
162</nav>
163
164
165
166
167                    </div><!-- /.modal-footer -->
168                </div><!-- /.modal-content -->
169            </div><!-- /.modal-dialog -->
170        </div><!-- /.modal -->
171</div>
172
173
174    </div>
175</main>
176
177    <!-- Optional JavaScript -->
178    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
179    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
180            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
181            crossorigin="anonymous"></script>
182    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
183            integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
184            crossorigin="anonymous"></script>
185    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
186            integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
187            crossorigin="anonymous"></script>
188</body>
189</html>

<form class="form-inline my-2 my-lg-0" action="/search" method="get" accept-charset="utf-8"> <input type="search" class="form-control mr-sm-2" placeholder="キーワードで検索" name="q" aria-label="検索..."> <button type="submit" class="btn btn-outline-info my-2 my-sm-0">検索</button> </form> ### 試したこと

カラム内のボタンを"float-right"などのレイアウトを整えるコードでくくったり、
コンテナ全体をセンターに集める様に"container-center"などのコードで一通り実行してみました。
ですが、だめでした。

②にかんしてですが、

html
1<form class="form-inline my-2 my-lg-0" action="/search" method="get" accept-charset="utf-8">
2<div class="form-group  mb-2">
3      <input type="search" class="form-control mr-sm-2" placeholder="キーワードで検索" name="q" aria-label="検索...">
4</div>
5      <button type="submit" class="btn btn-outline-info my-2 my-sm-0">検索</button>
6</form>

と、form-groupでくくる事で最小にしてもボタンがグリッドせずに横並びで表示させる事に成功したのですが、フォームとボタンが上下にずれてしまう結果となってしまいました。

m.ts10806

2020/09/28 09:55

当質問につけたタグだけでいきたいのでしたら、フレームワークのテンプレートエンジンの記述は避けて、ブラウザに表示されたHTMLをそのまま提示されたほうが良いです。

nre

2020/09/28 09:59

それはタグとタイトルのbootstrapを削除した方が回答が貰いやすいという事でしょうか？

m.ts10806

2020/09/28 10:01 編集

いえ、＞"{% url 'register:top' %}" HTMLでは解釈できません。

nre

2020/09/28 10:14 編集

ご指摘頂いた内容を理解しました！上記コードはpythonのフレームワークコードとなっておりますので削除させて頂きます。ありがとうございます！すいません、スマホからでは編集出来ないみたいなので、帰宅後に修正いたします！

m.ts10806

2020/09/28 10:12

ええ、ですから、削除というより「ブラウザに表示されたHTMLをそのまま提示されたほうが良いです。」と書きました。

nre

2020/09/28 10:17

すいません。理解出来ませんでした。まるっと、ヘッダーからボディまでという事でしょうか！

m.ts10806

2020/09/28 10:55

「現象が再現できるコード」であれば良いです。あくまで他人なので、どういうコードが全体なのか知りませんので、そのあたりは自身で調整願います。「コピペで再現できるコード」いずれにしてもブラウザで動作確認されてるわけですから、右クリック「ソースを表示」してでてくるのが「ブラウザに表示されたHTMLそのまま」です。コンパイル後なので変数などはすべて展開されています。

Lhankor_Mhy

2020/09/29 01:16

CSS には何も書かれていないのですか？

nre

2020/09/29 01:50

cssは現状、レイアウトに関する書き込みは行っておりません。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

①画面サイズmd以上の時に、メルカリの様にナビバー内のボタンや検索フォームを中央に揃えたいです。

m-auto でいいのではないかと思いました。

m - for classes that set margin
...
auto - for classes that set the margin to auto

Spacing · Bootstrap

②画面サイズsm以下の時に、検索フォーム横のボタンがグリッドしてしまうのを防ぎたいです.

当方の環境では sm だと横並びしていました。Extra small では下に落ちています。
いずれにせよ、col-10などにすればいいのではないかと思いました。

投稿2020/09/29 02:07

Lhankor_Mhy

総合スコア36960

nre

2020/09/29 02:34

こんにちは。ご回答いただきありがとうございます。差し支えなければ、どの様にコーディングすればよろしいかご教示いただけませんでしょうか。アドバイスいただいた通りに①の該当箇所と思われるところに、 <div class="mx-auto" style="width: 200px;"></div>または<div class="mx-auto"></div>で囲って観たのですがうまく行かずレイアウトが崩れてしまいました。また、②に関してもアドバイス通りに <div class="col-10 col-sm-8 order-md-1">または<div class="col-10 order-md-1">としてみましたが、変わらずフォームとボタンがズレてしまいます。

Lhankor_Mhy

2020/09/29 02:45

Bootstrap は、スタイルをつけたい要素にクラスを付与することによってスタイリングをします。ですので、中央に寄せたい要素にm-autoを、サイズを小さくしたい要素にcol-10をつけるのがいいと思います。

nre

2020/09/29 04:21

<div class="col-sm-4 order-sm-2"> <button type="button" class="btn btn-primary m-auto">カテゴリー</button> </div> や <div class="col-sm-4 order-sm-2"> <div class="m-auto"> <button type="button" class="btn btn-primary">カテゴリー</button> </div> </div> の様にしてもだめでした。空のカラムを追加した方がいいのでしょうか？

Lhankor_Mhy

2020/09/29 04:28

①について、中央寄せしたいのは、ナビバー全体だと思っていたのですが、「カテゴリー」だけなのですか？

nre

2020/09/29 04:54

失礼いたしました。ナビバー全体です。そのため、ナビバー内のrowにm-autoを記述してみましたが、微妙に左にズレてしまっております。 <nav class="navbar navbar-expand navbar-dark bg-dark fixed-top"> <div class="row m-auto"> <div class="col-4 col-sm-4 order-sm-0"> <a class="navbar-brand" href="{% url 'register:top' %}">ほげほげ</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div> <div class="col-8 col-sm-8 order-sm-3"> <div class=""> <button type="button" class="btn btn-primary">テスト</button> <button type="button" class="btn btn-primary">ログイン</button> <button type="button" class="btn btn-primary">会員登録</button> </div> </div> <div class="col-sm-8 order-sm-1"> <form class="form-inline my-2 my-lg-0" action="/search" method="get" accept-charset="utf-8"> <div class="form-group mb-0"> <input type="search" class="form-control mr-sm-2" placeholder="キーワードで検索" name="q" aria-label="検索..."> </div> <button type="submit" class="btn btn-outline-info my-2 my-sm-0">検索</button> </form> </div> <div class="col-sm-4 order-sm-2"> <button type="button" class="btn btn-primary m-auto">カテゴリー</button> </div> </div> </nav>

Lhankor_Mhy

2020/09/29 04:59

当方の環境では左にずれる、という現象が確認できませんでした。

Lhankor_Mhy

2020/09/29 05:01

「テスト」「ログイン」「会員登録」を右寄せすることをおやめになったようですが、その影響で左に寄っているように見えるのではありませんか？

nre

2020/09/29 05:12

何度もご回答していただき誠にありがとうございます。無事に左よりになる事なく、中央揃いになりました！本当にありがとうございました！！

行動規範の内容に同意します