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

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

ただいまの
回答率

90.50%

  • HTML5

    4159questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Bootstrap

    1000questions

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

ナビゲーションバーのスマホ表示だとログインが表示されない

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 215

1042limit

score 19

いつもお世話になります。
Laravel5.5、Bootstarp3でWebサイトを作成しております。
NavBarを作ったのですが、PC表示ではログインと登録が表示されますがスマホ表示でログインと登録が表示されず困っております。

実際herokuに設置したモノ 

ご教授の程よろしくお願いします。

navbar.blade.php

<header>
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-left" href="/"><img src="{{ asset("images/logo.jpg") }}" height=40></a>
            </div>
            <div>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <!-- Authentication Links -->
                    @if (Auth::guest())
                        <li><a href="{{ url('/user/login') }}">ログイン</a></li>
                        <li><a href="{{ url('/user/register') }}">登録</a></li>
                    @else
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                {{ Auth::user()->name }} <span class="caret"></span>
                            </a>

                            <ul class="dropdown-menu" role="menu">
                                <li><a href="/user/page/{{Auth::user()->id}}">マイページ</a>
                                </li>
                                <li>
                                    <a href="{{ url('/user/logout') }}"
                                        onclick="event.preventDefault();
                                                 document.getElementById('logout-form').submit();">
                                        Logout
                                    </a>

                                    <form id="logout-form" action="{{ url('/user/logout') }}" method="POST" style="display: none;">
                                        {{ csrf_field() }}
                                    </form>
                                </li>
                            </ul>
                        </li>
                    @endif
                </ul>
                </ul>
            </div>
        </div>
    </nav>
</header>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

ハンバーガーメニューにするなら以下のように行うことが出来ます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>保活広場</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://hokatsupark.herokuapp.com/css/style.css">
</head>
<body>
<header>
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-left" href="/">
                    <img src="http://hokatsupark.herokuapp.com/images/logo.jpg" alt="保育園の情報サイト保活広場" height=40>
                </a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="http://hokatsupark.herokuapp.com/user/login">ログイン</a></li>
                    <li><a href="http://hokatsupark.herokuapp.com/user/register">登録</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>
<div class="container">
    <div class="features-clean">
        <div class="container">
            <center><img src="http://hokatsupark.herokuapp.com/assets/img/Hokatsu Hiroba Tate.png" width="300"
                         alt="保育園情報サイト保活広場"></center>
        </div>
        <div class="container">
            <div class="intro"></div>
            <div class="row features">
                <div class="col-md-4 col-sm-6 item">
                    <i class="glyphicon glyphicon glyphicon-search icon" style="color:#40c8f4;font-size:36px;"></i>
                    <h3 class="name">保育園を探す</h3>
                    <p class="description">お住まいの市町村をクリックして保育園を探してみましょう。保育園の名前をクリックするとさらに詳しい情報が表示されます。</p>
                </div>
                <div class="col-md-4 col-sm-6 item">
                    <i class="glyphicon glyphicon-ok icon" style="color:rgb(242,135,183);font-size:36px;"></i>
                    <h3 class="name">保育園をチェックする</h3>
                    <p class="description">ユーザー登録をすると気になる保育園をチェックすることができます。あとで比較したりするのに便利です。</p>
                </div>
                <div class="col-md-4 col-sm-6 item">
                    <i class="glyphicon glyphicon-list-alt icon" style="color:rgb(253,184,52);font-size:36px;"></i>
                    <h3 class="name">保育園のリストをつくる</h3>
                    <p class="description">チェックした保育園はマイページに登録されていつでも確認できます。家族との共有も簡単です。</p>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title" style="color:rgb(64,179,244);">
                    <i class="glyphicon glyphicon-list-alt" style="font-size:36px;"></i>
                    <b>市町村別保育園一覧</b>
                </h3>
            </div>
            <div class="panel-body">
                <div class="table">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th style="background-color:#cde7f4;">都道府県</th>
                            <th style="background-color:#cfe8f5;">市町村名</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>神奈川県</td>
                            <td>横浜市(<a href="/city/?city_name=横浜市鶴見区">鶴見区</a><a href="/city/?city_name=横浜市旭区">旭区</a><a href="/city/?city_name=横浜市神奈川区">神奈川区</a><a href="/city/?city_name=横浜市西区">西区</a><a href="/city/?city_name=横浜市中区">中区</a><a href="/city/?city_name=横浜市南区">南区</a><a href="/city/?city_name=横浜市港南区">港南区</a><a href="/city/?city_name=横浜市保土ヶ谷区">保土ヶ谷区</a><a href="/city/?city_name=横浜市旭区">旭区</a><a href="/city/?city_name=横浜市磯子区">磯子区</a><a href="/city/?city_name=横浜市金沢区">金沢区</a><a href="/city/?city_name=横浜市港北区">港北区</a><a href="/city/?city_name=横浜市緑区">緑区</a><a href="/city/?city_name=横浜市青葉区">青葉区</a><a href="/city/?city_name=横浜市都築区">都築区</a><a href="/city/?city_name=横浜市神奈川区">戸塚区</a><a href="/city/?city_name=横浜市神奈川区">栄区</a><a href="/city/?city_name=横浜市神奈川区">泉区</a><a href="/city/?city_name=横浜市神奈川区">瀬谷区区</a></td>
                        </tr>
                        <tr>
                            <td>奈良県</td>
                            <td><a href="/city/?city_name=奈良市">奈良市</a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title" style="color:#ff66ff">
                    <i class="glyphicon glyphicon-search" style="font-size:36px;"></i>保活広場からのお願い
                </h3>
            </div>
            <div class="panel-body">
                <span>保活広場は、個人で保育園情報を収集してまとめております。そのため十分に目が行き届いてないところもございます。ここが間違っているなどご指摘があればこちらまでご連絡をお願いします。</span>
            </div>
        </div>
    </div>
</div>
<footer>
    <div class="text-center text-muted">© 2018 保活広場.</div>
</footer>
<script src="http://hokatsupark.herokuapp.com/assets/js/jquery.min.js"></script>
<script src="http://hokatsupark.herokuapp.com/assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>


もしもハンバーガーメニューにしたくないのならば、以下のCSSを追記してください。

@media (max-width: 768px) {
    .navbar-header, .navbar-nav > li {
        float: left;
    }

    .navbar-nav {
        margin: 0 -15px;
    }

    .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
        line-height: 20px;
    }

    .navbar-collapse.collapse {
        display: block;
        border-top: none;
    }

    .navbar-right {
        float: right;
    }

    .navbar-nav.navbar-right:last-child {
        margin-right: -15px;
    }

    .navbar-toggle {
        display: none;
    }
}

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/04/21 17:32

    この質問とは関係ありませんが、`img要素`に`max-width`を設定しておかないと画面サイズが小さくなったときに問題が生じるかもしれませんね。

    キャンセル

  • 2018/04/21 22:37

    コードありがとうございます。実装して無事表示されました!
    本当に感謝です。

    ご指摘の通り、max-widthの問題も生じておりました。そこは、画像を300Pxにすることだ力技で解決しました。

    キャンセル

関連した質問

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

  • HTML5

    4159questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Bootstrap

    1000questions

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