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

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

ただいまの
回答率

87.50%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 594

score 31

前提・実現したいこと

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

イメージ説明
イメージ説明

該当のソースコード

<!doctype html>
<html lang="ja">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
          integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
    <title>ほげほげ - Topページ</title>
</head>
<body>

<!-- ナビバーデザインテストー -->
<nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
    <div class="row">
        <div class="col-4 col-md-4 order-md-0">
            <a class="navbar-brand" href="/">ほげほげ</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-md-8 order-md-3">
            <div class="float-right">
                <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-12 col-md-8 order-md-1">
            <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>
        </div>
        <div class="col-md-4 order-md-2">
            <button type="button" class="btn btn-primary">カテゴリー</button>
        </div>
    </div>
</nav>



<!-- 本番一時コメントアウトー -->
<!--
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="/">ほげほげ</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 class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">

          <li class="nav-item">
            <a class="nav-item nav-link" href="/login/">
            ようこそ、ゲストさん!ログインはこちら
          </a>
          </li>

        </ul>
          <div class="btn-group">
              <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  スキルで絞り込む
              </button>
              <form class="form-inline my-2 my-lg-0" action="" method="get" accept-charset="utf-8">
                  <div class="dropdown-menu">
                      <button class="dropdown-item" type="submit" value="1" name="q">ほげほげ</button>
                      <button class="dropdown-item" type="submit" value="2" name="q">ほげほげ</button>
                      <button class="dropdown-item" type="submit" value="3" name="q">ほげほげ</button>
                      <button class="dropdown-item" type="submit" value="4" name="q">ほげほげ</button>
                      <button class="dropdown-item" type="submit" value="5" name="q">ほげほげ</button>
                      <button class="dropdown-item" type="submit" value="6" name="q">ほげほげ</button>
                      <button class="dropdown-item" type="submit" value="7" name="q">ほげほげ</button>
                      <button class="dropdown-item" type="submit" value="8" name="q">ほげほげ</button>
                  </div> <!--/.dropdown-menu -->

              </form>
          </div><!-- /.btn-group -->
          <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>
      </div>
</nav>

<!-- top画像ー -->
<img class="img-fluid" src="/media/freelanze-top-image.png" style="margin-top: 55px">
<main>
    <!-- メインコンテンツ -->
    <div class="container mt-auto">


<div class="container-fluid">
    <div class="row">
        <div class="col-12" style="mx-auto">
            <p class="text-center"><span class="bg-white text-primary">\新着フリーランス一覧/</span></p>
        </div>
    </div>
</div>

<!--表示カード調整中-->
<div class="container">
  <div class="row">

        <div class="col-6 col-md-3  mb-3">
            <div class="card" style="width: 100%;">

                <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">

                <div class="card-body">
                    <h6 class="card-skill">ほげほげ</h6>
                    <p class="card-text">100,000円〜</p>
                </div>
            </div>
        </div>

        <div class="col-6 col-md-3  mb-3">
            <div class="card" style="width: 100%;">

                <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">

                <div class="card-body">
                    <h6 class="card-skill">ほげほげ</h6>
                    <p class="card-text">50,000円〜</p>
                </div>
            </div>
        </div>

        <div class="col-6 col-md-3  mb-3">
            <div class="card" style="width: 100%;">

                <div class="card-body">
                    <h6 class="card-skill">ほげほげ</h6>
                    <p class="card-text">〜10,000円</p>
                </div>
            </div>
        </div>

  </div>
</div>

<!--ページネーション↓-->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-end">
    <!-- 前へ の部分 -->

    <!-- 数字の部分 -->


            <li class="page-item active"><a class="page-link" href="#!">1</a></li>


    <!-- 次へ の部分 -->

</ul>
</nav>




                    </div><!-- /.modal-footer -->
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
</div>


    </div>
</main>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
            integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
            integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
            crossorigin="anonymous"></script>
</body>
</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"などのコードで一通り実行してみました。
ですが、だめでした。

②にかんしてですが、

<form class="form-inline my-2 my-lg-0" action="/search" method="get" accept-charset="utf-8">
<div class="form-group  mb-2">
      <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>


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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2020/09/28 19:55

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

    キャンセル

  • Lhankor_Mhy

    2020/09/29 10:16

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

    キャンセル

  • nre

    2020/09/29 10:50

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

    キャンセル

回答 1

checkベストアンサー

0

こんにちは。

>①画面サイズ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 13:59

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

    キャンセル

  • 2020/09/29 14:01

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

    キャンセル

  • 2020/09/29 14:12

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

    キャンセル

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

  • ただいまの回答率 87.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る