Jquery Bootstrap 4移动站点的作用类似于桌面
我有一个使用Bootstrap4的网站。在我的电脑上进行测试时,一切看起来都正常,并根据屏幕分辨率适当调整了大小。像这样: 但当我在手机上加载同一页面时: 它将网格布局用于桌面屏幕。有人知道这是为什么吗?我已经在标题中添加了这个Jquery Bootstrap 4移动站点的作用类似于桌面,jquery,html,css,bootstrap-4,Jquery,Html,Css,Bootstrap 4,我有一个使用Bootstrap4的网站。在我的电脑上进行测试时,一切看起来都正常,并根据屏幕分辨率适当调整了大小。像这样: 但当我在手机上加载同一页面时: 它将网格布局用于桌面屏幕。有人知道这是为什么吗?我已经在标题中添加了这个meta标记,因为我被告知这将有助于支持移动设备。我不知道还有什么可能设置错误 我的代码: <!DOCTYPE html> <html> <head> <script src="https://ajax.googlea
meta
标记,因为我被告知这将有助于支持移动设备
。我不知道还有什么可能设置错误
我的
代码:
<!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>
@收益率('css_包括')
@收益率('navbar')
@产量(‘含量’)
@产量('page_scripts')
@堆栈(“额外的_脚本”)
导航栏的代码:
<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>
-
-
Bootstrap强烈建议在使用Bootstrap时,在
标记中包含这3个元标记
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
尝试添加所有这3个标记。此外,请检查您的手机浏览器是否启用了显示“桌面网站视图”的选项。您是否可以添加html代码以更好地了解您的问题?E's a lost:/现在将添加标题和导航栏代码。添加了另外两个
标记,这就解决了,谢谢!!