Html 为什么我的引导列重叠？

我正在制作一个单页布局的网站，每个部分都是全宽的，并且与视口的高度相同。我使用bootstrap使这些部分中的内容具有响应性，但是当我减小视口大小时，我的列重叠（而不是堆叠），我不知道为什么

以下是我的css和html（希望它提供足够的信息来确定问题）的一部分：

。联系{
最小高度：100vh；
背景色：rgb（225、138、64）；
位置：相对位置；
}
#地图{
高度：40vh；
宽度：80%；
背景：白色；
位置：绝对位置；
利润上限：270px；
左边距：20px；
显示：块；
}
.otherdiv{
高度：40vh；
宽度：80%；
背景：白色；
位置：绝对位置；
利润上限：270px；
左边距：20px；
显示：块；
}
.maxWidth{
最大宽度：90%；
}

接触
一些文本

确保在列中使用正确的栅格视口

Bootstrap有四个（xs、sm、md和lg），它们适用于定义的宽度及以上。当您使用md设置列时，它们将仅在具有至少992px的窗口中工作

如果希望这些列始终占据屏幕的一半，请使用

col-xs-6

类

---

您可以在

中找到此信息。您必须从div id和类中删除

position:absolute

属性。 如下:

#map  {
    height: 40vh;
    width: 80%;
    background: white;
    margin-top: 270px;
    margin-left: 20px;
    display: block;
}

.otherdiv {
    height: 40vh;
    width: 80%;
    background: white;  
    margin-top: 270px;
    margin-left: 20px;
    display: block;
}

---

这是一个例子。现在它正确地堆叠了。

不知道会发生什么，因为缺少引导样式，但我想，这是因为您使用的是

col-md-3

所以

md

代表

中间分辨率（不知道确切的分辨率）。尝试使用
col-xs-3
因为使用了
position:absolute，在任何地方删除它，它都会工作。此外，您还可以提供您想要实现的结果的图像。谢谢，这已修复！