所以,我知道社区成员表现出来的响应行为是指:
HTML
我正在尝试创建一个Bootstrap两栏布局,其中第一列有一张图片,第二列有地图。 问题如下:
作为参考,这是我正在处理的页面:示例。
HTML
<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15288.360926048195!2d51.52175762195133!3d25.282422800605804!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e45c534ffdce87f%3A0x1cfa88cf812b4032!2sQatar!5e0!3m2!1sen!2s!4v1546430525796" width="380" height="440" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
and css
.map-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
我正在尝试创建一个Bootstrap两栏布局,其中第一列有一张图片,第二列有地图。 问题如下:
- 等高
- 响应式行为
<div class="container-fluid px-0">
<div class="row mx-0">
<div class="flex-grow-0">
<img class="img-fluid" src="https://devs.kodenlogix.com/mtmgrp/mtmglobal/wp-content/uploads/2019/01/contactus-img.jpg" alt="Contact">
</div>
<div class="flex-grow-1 map-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15288.360926048195!2d51.52175762195133!3d25.282422800605804!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e45c534ffdce87f%3A0x1cfa88cf812b4032!2sQatar!5e0!3m2!1sen!2s!4v1546430525796" width="380" height="440" frameborder="0" style="border:0" allowfullscreen=""></iframe>
</div>
</div>
作为参考,这是我正在处理的页面:示例。