我有一个网站,我不能使iframe响应。Map在电脑上看起来很正常,但在移动的上看不见。我目前正在使用bootstrap
<div class="container d-none d-sm-block mb-5 pb-4">
<div class="wrapper" id="map" style="height: 480px; position: relative; overflow: hidden;">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5994.821337674272!2d69.25345364107476!3d41.29992894681807!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x38ae8ae3e16117eb%3A0xe38bf57767a5d5a9!2z0KjQutC-0LvQsCDihJY5MQ!5e0!3m2!1sru!2s!4v1689872593583!5m2!1sru!2s"
width="1100" height="450" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
字符串
也许问题是与引导风格,所以下面是链接和脚本:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="{% static 'blog/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/magnific-popup.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/font-awesome.min.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/themify-icons.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/nice-select.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/flaticon.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/gijgo.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/animate.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/slicknav.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/style.css' %}">
<script src="{% static 'blog/js/vendor/modernizr-3.5.0.min.js' %}"></script>
<script src="{% static 'blog/js/vendor/jquery-1.12.4.min.js' %}"></script>
<script src="{% static 'blog/js/popper.min.js' %}"></script>
<script src="{% static 'blog/js/bootstrap.min.js' %}"></script>
<script src="{% static 'blog/js/owl.carousel.min.js' %}"></script>
<script src="{% static 'blog/js/isotope.pkgd.min.js' %}"></script>
<script src="{% static 'blog/js/ajax-form.js' %}"></script>
<script src="{% static 'blog/js/waypoints.min.js' %}"></script>
<script src="{% static 'blog/js/jquery.counterup.min.js' %}"></script>
<script src="{% static 'blog/js/imagesloaded.pkgd.min.js' %}"></script>
<script src="{% static 'blog/js/scrollIt.js' %}"></script>
<script src="{% static 'blog/js/jquery.scrollUp.min.js' %}"></script>
<script src="{% static 'blog/js/wow.min.js' %}"></script>
<script src="{% static 'blog/js/nice-select.min.js' %}"></script>
<script src="{% static 'blog/js/jquery.slicknav.min.js' %}"></script>
<script src="{% static 'blog/js/jquery.magnific-popup.min.js' %}"></script>
<script src="{% static 'blog/js/plugins.js' %}"></script>
<script src="{% static 'blog/js/gijgo.min.js' %}"></script>
<!--contact js-->
<script src="{% static 'blog/js/contact.js' %}"></script>
<script src="{% static 'blog/js/jquery.ajaxchimp.min.js' %}"></script>
<script src="{% static 'blog/js/jquery.form.js' %}"></script>
<script src="{% static 'blog/js/jquery.validate.min.js' %}"></script>
<script src="{% static 'blog/js/mail-script.js' %}"></script>
<script src="{% static 'blog/js/main.js' %}"></script>
型
1条答案
按热度按时间lstz6jyr1#
您已经在主容器上写入了
d-none d-sm-block
。它是Bootstrap,意思是“这个元素以display: none;
开始,只有当屏幕宽度为576px或更大时才变成display: block;
”。如果你需要更多的解释,你需要阅读CSS和Bootstrap文档。