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

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

ただいまの
回答率

90.49%

  • HTML

    11824questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Bootstrap

    1336questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • Laravel

    1062questions

    LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

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

解決済

回答 2

投稿

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

gobindar

score 31

 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
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/ツールのバージョンなど)

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • yoshinavi

    2018/10/02 16:48

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

    キャンセル

回答 2

checkベストアンサー

+1

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 17:26 編集

    ありがとうございます!!
    お出し頂いたものをそのまま貼り付けたところ、
    右寄せになりました。

    原因がおそらく冒頭の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 17:38

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

    キャンセル

  • 2018/10/02 19: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/

    基本的すぎるご質問で申し訳ありません・・・

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/02 16:42

    コメントありがとうございます。
    公式ドキュメントを参考に修正を試みましたがだめでした。

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

    キャンセル

  • 2018/10/02 16:45

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

    キャンセル

  • 2018/10/02 19:33

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

    キャンセル

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

  • HTML

    11824questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Bootstrap

    1336questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • Laravel

    1062questions

    LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。