Bootstrap 4 移动网站就像桌面一样答案

【问题标题】：Bootstrap 4 mobile site acting like desktopBootstrap 4 移动网站就像桌面一样
【发布时间】：2018-09-25 10:05:09
【问题描述】：

我有一个使用 bootstrap 4 的网站。在我的计算机上进行测试时，一切看起来都还不错，并且已根据屏幕分辨率正确调整大小。像这样：

但是当我在手机上加载相同的页面时：

它在桌面屏幕上使用网格布局。有谁知道这是为什么？我已将此meta 标签添加到标题中，因为有人告诉我这将有助于支持移动设备<meta name="viewport" contain="width=device-width, initial-scale=1.0">。我不知道还有什么可能设置错误！

我的<head> 代码：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

    <link rel="stylesheet" href="/css/master.css" type="text/css">
    @yield('css_includes')

    <meta name="viewport" contain="width=device-width, initial-scale=1.0">
</head>
<body>
    @yield('navbar')

    <div class="container-fluid h-100">
        @yield('content')
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    @yield('page_scripts')
    @stack('extra_scripts')
</body>
</html>

导航栏的代码：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">Order Happy</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar_content" aria-controls="navbar_content" aria-expanded="false" aria-label="Toggle Navigation">
    <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbar_content">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item {{ request()->is($business->business_slug) ? 'active' : '' }}">
            <a class="nav-link" href="/{{ $business->business_slug }}">{{ $business->name }}</a>
        </li>
        <li class="nav-item {{ request()->is($business->business_slug . "/basket") ? 'active' : '' }}">
            <a class="nav-link" href="/{{ $business->business_slug }}/basket">Basket <span class="badge badge-light">{{ $basket_quantity }}</span></a>
        </li>
    </ul>
</div>
</nav>

【问题讨论】：

能否包含您的 html 代码以便更好地理解您的问题
有很多：/现在将添加标题和导航栏代码。

标签： jquery html css bootstrap-4

【解决方案1】：

Bootstrap 强烈建议您在使用 bootstrap 时将这 3 个元标记包含在 <head> 标签内。

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

尝试添加所有这 3 个标签。此外，如果启用了显示“桌面网站视图”的选项，请检查您的移动浏览器。

【讨论】：

添加了另外两个<meta>标签，已经解决了，谢谢！！