为什么我的引导列重叠？答案

【问题标题】：Why do my bootstrap columns overlap?为什么我的引导列重叠？
【发布时间】：2016-04-11 18:30:15
【问题描述】：

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

这是我的 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>

【问题讨论】：

不知道发生了什么，因为缺少引导样式，但我想，这是因为您使用的是col-md-3，所以md 代表middle 分辨率（不要知道确切的分辨率）。试试col-xs-3
发生这种情况是因为您使用了position: absolute;，在任何地方删除它，它都会起作用。此外，您可以提供您想要达到的结果的图像。

标签： html css twitter-bootstrap

【解决方案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 的示例。现在它可以正确堆叠了。

【讨论】：

【解决方案2】：

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

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

如果您希望这些列始终占据屏幕的一半，请使用 col-xs-6 类。

您可以在Bootstrap's official documentation找到此信息

【讨论】：