导航不会在移动设备中崩溃[重复]答案

【问题标题】：Nav not collapsing in mobile devices [duplicate]导航不会在移动设备中崩溃[重复]
【发布时间】：2017-01-03 06:58:15
【问题描述】：

我正在开发一个引导站点http://soygarota.com/blog/public

我检查了几次代码，添加了 bootstrap.min.css、bootstrap.min.js 和 jquery，但由于某种原因，当我使用移动设备或 Google Inspector 时，标题导航没有折叠。

这是我的标题导航的代码

<div class="masthead hidden-sm">
    <img src="{{ asset('images/layout/header.JPG') }}" class="img-responsive logo-header-img"/>
</div>
<div class="navbar navbar-inverse text-center sin-bordes" role="navigation">
    <div class="container-fluid text-center">
        <div class="navbar-header text-center">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>
        <div class="collapse navbar-collapse text-center
">
            <ul class="nav navbar-nav text-center">
                <li><a href="{{ Route('front.index') }}" class="HeaderLink">HOME</a></li>
                <li><a href="{{route('front.search.category', 'INSPIRATION')}}" class="HeaderLink">INSPIRATION</a></li>
                <li><a href="{{route('front.search.category', 'LIFESTYLE')}}" class="HeaderLink">LIFESTYLE</a></li>
                <li><a href="{{route('front.search.category', 'FASHION')}}" class="HeaderLink">FASHION</a></li>
                <li><a href="{{ route('front.about') }}" class="HeaderLink">ABOUT</a></li>
                <li><a href="{{ route('front.contact') }}" class="HeaderLink">CONTACT</a></li>
            </ul>

            <div class="col-sm-3 col-md-3 pull-right">
                {!! Form::open(['route' => 'front.index', 'method' => 'GET', 'class' => 'navbar-form','role' => 'search']) !!}
                <div class="input-group">
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit" id="SearchInput"><i class="glyphicon glyphicon-search" id="SearchIcon"></i></button>
                    </div>
                    <input type="text" class="form-control" placeholder="SEARCH" name="srch_term" id="srch_term">
                </div>
                {!! Form::close() !!}
            </div>


        </div><!--/.nav-collapse -->


    </div>
</div>

任何帮助将不胜感激，在此先感谢

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

嘿，试试在你的 head 标签中设置这个：

 <meta name="viewport" content="width=device-width, initial-scale=1">

如果您想了解有关其工作原理的更多信息，请查看此 Link

【讨论】：

它打破了所有的设计