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

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

ただいまの
回答率

87.78%

Bootstrap5.0 col内で画像とbuttonの上下中央寄せができない

解決済

回答 2

投稿 編集

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

score 13

実現したいこと

Headerを作りたい。要件は以下。

  • 左側にロゴ画像
  • 右側にハンバーガーメニュー
  • モバイル(iPhoneX)のみで動けばOK

直面している問題

以下のようにrowとgridでレイアウトを作ったとき,画像とハンバーガーメニューが上下中央寄せにできない。
イメージ説明

試みた解決方法

  • d-flex  align-items-center

コード

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<header class="fixed-top">
    <nav class="navbar navbar-expand-lg navbar-light bg-light p-1">
        <div class="container-fluid">
            <div class="row">
                <div class="col">
                    <div class="header-img">
                        <a href="${fn:escapeXml(pageContext.request.contextPath)}/Index" class="navbar-brand"><img class="header"
                            src="${fn:escapeXml(pageContext.request.contextPath)}/image/header.png"
                            alt="header画像"></a>
                    </div>
                </div>
                <div class="col">
                    <div class="float-end">
                        <button class="navbar-toggler" type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#navbarSupportedContent"
                            aria-controls="navbarSupportedContent" aria-expanded="false"
                            aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                    </div>
                </div>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item"><a class="nav-link text-center"
                            href="${fn:escapeXml(pageContext.request.contextPath)}/Philosophy">理念</a></li>
                        <li class="nav-item"><a class="nav-link text-center"
                            href="${fn:escapeXml(pageContext.request.contextPath)}/Guide">利用方法</a></li>
                        <li class="nav-item"><a class="nav-link text-center"
                            href="${fn:escapeXml(pageContext.request.contextPath)}/Faq">FAQ</a></li>
                        <li class="nav-item"><a class="nav-link text-center"
                            href="${fn:escapeXml(pageContext.request.contextPath)}/Login">LOGIN</a></li>
                        <li class="nav-item"><a class="nav-link text-center"
                            href="${fn:escapeXml(pageContext.request.contextPath)}/Logout">LOGOUT</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
</header>

環境

  • Bootstrap 5.0

補足

コード自体も未熟とは思います。何卒諸々含めてご教授いただけますと幸いです。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2021/06/14 04:56

    何のフレームワークか分かりませんが、
    タグに入れない以上は、コンパイル後のHTMLを提示されたほうが良いと思います。現状ではコピペで再現できませんので。

    キャンセル

  • hogwan

    2021/06/14 23:11

    回答ありがとうございます。Bootstrapはある程度有名なフレームワークと思っています。htmlタグまで明記しなかった理由としては,ドキュメントもそのような表記になっているためです。

    https://getbootstrap.com/docs/5.0/getting-started/introduction/

    また,個人的にHTMLのコンパイルというのがピンときません。また,コンパイル後のソースコードを公開するのは一般的でないと思うのですが,いかがでしょうか。

    キャンセル

  • hope_mucci

    2021/06/15 01:18

    質問文に書いてあるコードはjspですよね。
    jspは制御コード等を記載するのでそのままをブラウザに表示しても意図通りの出力にならないことはよくご存じだと思います。
    jspファイルの中身ではなく、最終的にブラウザで出力した際のソースコードを添付してくれ、というのがm.ts10806さんの追記依頼の趣旨です。
    コンパイルではなくレンダリングと表現したほうが良かった感があります(jspをコンパイルするとclassファイルになってしまう)

    キャンセル

  • hogwan

    2021/06/16 00:06

    ご丁寧な追記ありがとうございます。腑に落ちました。

    >最終的にブラウザで出力した際のソースコードを添付してくれ
    非常に分かりやすいです。ありがとうございます。

    キャンセル

回答 2

checkベストアンサー

+1

とりあえず画像のような状態を再現解消するのが目的であれば、navの中の
container-fluid,row,colのコンテナとグリッドに関するdiv要素を削除すれば実現できます。
.navbarスタイルはデフォルトで中の要素を「上下中央寄せ」します。

ぶっちゃけnavbarの中身はグリッドシステムは不要です。チュートリアル通りに実装すれば全然問題ないはずです。

追記:

回答のようにcontainer-fluidとグリッドシステムに関わるタグを削除したらこのようになるデモ。
回答した内容はちゃんと検証していただきたい。

また、本文に表現の誤りがありましたので修正しました。申し訳ないです。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2021/06/14 23:14

    回答ありがとうございます。

    >とりあえず画像のような状態を再現するのが目的であれば
    本文に記載の通り,画像は直面している問題であり,目指したい状態ではありません。

    >チュートリアル通りに実装すれば全然問題ないはずです。
    具体的にドキュメントのどの部分を参考にすればよいのでしょうか。おそらく,ほぼすべてのチュートリアルをそのまま試しましたが,うまくいきませんでした。

    https://getbootstrap.jp/docs/5.0/components/navbar/

    ここにも,画像を左寄せ,ハンバーガーメニューを右寄せするサンプルは置いていないように思えます。

    キャンセル

  • 2021/06/15 01:12

    >とりあえず画像のような状態を再現するのが目的であれば
    これは書き損じでした。本文を修正しています。申し訳ないです。
    ついでに回答通りにタグを削除した状態のデモpenを追記しておきました。

    > https://getbootstrap.jp/docs/5.0/components/navbar/
    > ここにも,画像を左寄せ,ハンバーガーメニューを右寄せするサンプルは置いていないように思えます。
    リンクのサイトをスマホで見てみましょう。bootstrapのドキュメントサイトは基本的に全レスポンシブ対応です。PCブラウザで幅を狭めても、検証ツールでデバイス指定しても良いです。

    キャンセル

  • 2021/06/16 00:09

    検証までしていただき誠にありがとうございます。助かりました><

    キャンセル

0

中央揃えしたい要素を Flex 親直下にし、Auto marginsで実装したら良いと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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