html - 为什么我的 bootstrap 列重叠？

Question

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

这是(部分)我的 css 和 html(希望它提供足够的信息来确定问题):

.contact {
	min-height: 100vh;
    background-color: rgb(225, 138, 64);
    position: relative;
}

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

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

.maxWidth {
	max-width: 90%;
}

<div id="contact" class="contact">
	
	<div class="container maxWidth">
        <h1>Contact</h1>
        
        <div class="row">
            <div class="col-md-6">
                <p>Some text.</p>
                <div id="map"></div>
            </div>
            <div class="col-md-6">
                <div class="otherdiv"></div>
            </div>
        </div>
    </div>
	
</div>

Answer 1

您必须从您的 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;
}

继承人 CODEPEN示例。现在它已正确堆叠。