Question

我正在尝试构建一个包含一些引导样式和一些网格的网站。

我想在右侧部分使用Google地图卡，在左侧则需要一个简单的文字。

我遇到的问题是，我在移动设备上有一个Google iframe和网格之间的空间。我把它给了它蓝色的颜色，所以我可以看到哪个网格是哪里但是我怎么能修复它，谷歌地图占据了网格的整个宽度，没有它周围的空间，你可以在移动设备上看到它？ here is the demo site

            <div class="col-xs-6 col-md-6 gmap" style="background-color:blue">
            <iframe src="   https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2369.3387871906875!2d9.987669999999998!3d53.56956999999999!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b18f10c1641aa5%3A0x9e2e0a1e8cac2d78!2sT%26M+Limousinen+Service+GmbH!5e0!3m2!1sde!2sde!4v1403018648499" width="100%" height="50%" frameborder="0" style="border:0"></iframe>  

            <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>


.gmap{ padding: 0; height:15%;}

Answer 1

尽量使用表格标签订购。

<table>
    <tr>
        <td colspan="3">
            asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd
        </td>
    </tr>
    <tr>

        <td>
            a la derecha
        </td>
        <td style = "background-color:blue">

        </td>
        <td>
            <div class="col-xs-6 col-md-6 gmap" style="background-color:blue">
                <iframe src="   https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2369.3387871906875!2d9.987669999999998!3d53.56956999999999!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b18f10c1641aa5%3A0x9e2e0a1e8cac2d78!2sT%26M+Limousinen+Service+GmbH!5e0!3m2!1sde!2sde!4v1403018648499" width="100%" height="50%" frameborder="0" style="border:0"></iframe>  

            <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
        </td>
    </tr>
</table>

我正在尝试这个并且是一个简单的解决方案，你可以为你的桌子和其他内部标签添加一些样式，希望对你有帮助。

如何删除地图框之间的空间

1 个答案: