Bootstrap4でNavbarの中に配置した検索フォームを右寄せしたい

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
Bootstrap4でNavbarの中に配置した検索フォームが右寄せできません。
サンプルでは右寄せできていて、私の環境
(macでGoogle Chromeを使用、local環境にて結果を確認しています)
では左寄せになってしまいます。

発生している問題・エラーメッセージ

検索フォームが左寄せになってしまう

エラーメッセージ


### 該当のソースコード

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#"><img src="logo.png" width="200" height="60" class="d-inline-block align-top" alt=""></a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="レスポンシブ・ナビゲーションバー">
    <span class="navbar-toggler-icon"></span>
  </button>

    <div class="collapse navbar-collapse" id="Navber">
      <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
        <li class="nav-item active">
          <a class="nav-link" href="#">ホーム <span class="sr-only">(現位置)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">リンク</a>
        </li>
<li class="nav-item">
          <a class="nav-link disabled" href="#">無効</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0 mr-auto">
        <input type="search" class="form-control mr-sm-2" placeholder="検索..." aria-label="検索...">
        <button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button>
      </form>
    </div><!-- /.navbar-collapse -->
  </nav>

### 試したこと

下から6行目のフォームクラス定義で右寄せの設定をするのか思い、
「mr-auto」を記載しましたが、左寄せのままです。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

yoshinavi

2018/10/02 07:48

Chromeであれば「デベロッパーツール」で、適用されているCSSの確認はされていますか？

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

回答2件

ベストアンサー

mr-autoを外すと右寄せになりますけどね？

<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="https://duckduckgo.com/assets/logo_homepage_mobile.normal.v107.svg" width="200" height="60" class="d-inline-block align-top" alt=""></a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="レスポンシブ・ナビゲーションバー">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="Navber">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">ホーム <span class="sr-only">(現位置)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">無効</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0 ">
<input type="search" class="form-control mr-sm-2" placeholder="検索..." aria-label="検索...">
<button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button>
</form>
</div><!-- /.navbar-collapse -->
</nav>
</body>
</html>

投稿2018/10/02 08:13

退会済みユーザー

総合スコア0

gobindar

2018/10/02 08:29 編集

ありがとうございます！！お出し頂いたものをそのまま貼り付けたところ、右寄せになりました。原因がおそらく冒頭のlinkとscriptで読み込んでいるスタイルシートなのですが、現在は公式サイト(https://getbootstrap.com/docs/4.1/getting-started/download/)からDLした下記のbootstrap.cssと、右記サイトで必要とされていたapp.css(https://www.jaga.biz/laravel/laravel-5-5_bootstrap4-beta/)を使用しています。 <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="/css/app.css"> <script src="js/jquery.js"></script> <script src="js/bootstrap.js"></script> <script src="/js/app.js"></script> 当方初心者でして、実際どこからテンプレートとなるcssを用意すればよいかわかっていないのですが、上記のものだと機能しないことがあるのでしょうか？

退会済みユーザー

2018/10/02 08:38

試しておりませんが、bootstrap.jsがlaravelの4.0.0 betaではないのでしょうか？これを公式サイトから入手した物に差し替えてみてはいかがでしょうか？

gobindar

2018/10/02 10:32 編集

ご返信ありがとうございます。どうやらbeta版だったようです。 (取り替えたところ、右寄せになりました) 質問内容と少しずれてしまうのですが、 bootstrap4を使用する上で読み込む基本的なファイルは公式から落とした bootstrap.cssとbootstrap.jsと、 jquery.js(Laravel4.00使用なので標準装備でした) の3つでしょうか？下記ページ記載のapp.cssはbeta用ということで、不要でしょうか・・・(app.cssなしで正しく右寄せで機能しました) https://www.jaga.biz/laravel/laravel-5-5_bootstrap4-beta/ 基本的すぎるご質問で申し訳ありません・・・

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

記述する場所が違うのでは？
公式ドキュメントの例を参考にしてみてください。
https://getbootstrap.com/docs/4.1/components/navbar/#supported-content

HTML
1    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">

投稿2018/10/02 07:20

x_x

総合スコア13749

gobindar

2018/10/02 07:42

コメントありがとうございます。公式ドキュメントを参考に修正を試みましたがだめでした。一旦公式ドキュメントを丸々コピーしてためしてみたところ、それでもフォームが左によってしまいました。要はコードが原因でないと思われますが、どのような原因が考えられますでしょうか・・・

x_x

2018/10/02 07:45

ちゃんとBootstrap 4を読み込んでいるでしょうか？実は3だったという可能性は？

gobindar

2018/10/02 10:33

ご返信ありがとうございます。 Bootstrap4です。上記コメントで頂きました通り、どうやら読み込んでいたcssが誤っていたようです。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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