前提・実現したいこと
ここに質問の内容を詳しく書いてください。
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/ツールのバージョンなど) ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー