Q&A
当質問につけたタグだけでいきたいのでしたら、フレームワークのテンプレートエンジンの記述は避けて、ブラウザに表示されたHTMLをそのまま提示されたほうが良いです。
前提・実現したいこと
①画面サイズmd以上の時に、メルカリの様にナビバー内のボタンや検索フォームを中央に揃えたいです。
②画面サイズsm以下の時に、検索フォーム横のボタンがグリッドしてしまうのを防ぎたいです.
該当のソースコード
<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> ### 試したこと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>
カラム内のボタンを"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でくくる事で最小にしてもボタンがグリッドせずに横並びで表示させる事に成功したのですが、フォームとボタンが上下にずれてしまう結果となってしまいました。
それはタグとタイトルのbootstrapを削除した方が回答が貰いやすいという事でしょうか？
いえ、
＞"{% url 'register:top' %}"
HTMLでは解釈できません。
ご指摘頂いた内容を理解しました！
上記コードはpythonのフレームワークコードとなっておりますので削除させて頂きます。
ありがとうございます！
すいません、スマホからでは編集出来ないみたいなので、帰宅後に修正いたします！
ええ、ですから、削除というより「ブラウザに表示されたHTMLをそのまま提示されたほうが良いです。 」と書きました。
すいません。理解出来ませんでした。
まるっと、ヘッダーからボディまでという事でしょうか！
「現象が再現できるコード」であれば良いです。
あくまで他人なので、どういうコードが全体なのか知りませんので、
そのあたりは自身で調整願います。「コピペで再現できるコード」
いずれにしてもブラウザで動作確認されてるわけですから、右クリック「ソースを表示」してでてくるのが「ブラウザに表示されたHTMLそのまま」です。
コンパイル後なので変数などはすべて展開されています。
CSS には何も書かれていないのですか？
cssは現状、レイアウトに関する書き込みは行っておりません。
回答1件
0
ベストアンサー
こんにちは。
①画面サイズmd以上の時に、メルカリの様にナビバー内のボタンや検索フォームを中央に揃えたいです。
m-auto でいいのではないかと思いました。
m - for classes that set margin
...
auto - for classes that set the margin to auto
②画面サイズsm以下の時に、検索フォーム横のボタンがグリッドしてしまうのを防ぎたいです.
当方の環境では sm だと横並びしていました。Extra small では下に落ちています。
いずれにせよ、col-10などにすればいいのではないかと思いました。
投稿2020/09/29 02:07
総合スコア36104
こんにちは。
ご回答いただきありがとうございます。
差し支えなければ、どの様にコーディングすればよろしいかご教示いただけませんでしょうか。
アドバイスいただいた通りに①の該当箇所と思われるところに、
<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">としてみましたが、
変わらずフォームとボタンがズレてしまいます。
Bootstrap は、スタイルをつけたい要素にクラスを付与することによってスタイリングをします。
ですので、中央に寄せたい要素にm-autoを、サイズを小さくしたい要素にcol-10をつけるのがいいと思います。
<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>
の様にしてもだめでした。
空のカラムを追加した方がいいのでしょうか？
①について、中央寄せしたいのは、ナビバー全体だと思っていたのですが、「カテゴリー」だけなのですか？
失礼いたしました。ナビバー全体です。
そのため、ナビバー内の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>
当方の環境では左にずれる、という現象が確認できませんでした。
「テスト」「ログイン」「会員登録」を右寄せすることをおやめになったようですが、その影響で左に寄っているように見えるのではありませんか？
何度もご回答していただき誠にありがとうございます。
無事に左よりになる事なく、中央揃いになりました！
本当にありがとうございました！！
あなたの回答
tips
プレビュー
