为什么我的引导列重叠？ [英] Why do my bootstrap columns overlap?

问题描述

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

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

  .contact {min-height：100vh; background-color：rgb（225,138,64）; position：relative;}＃map {height：40vh;宽度：80％;背景：白色;位置：绝对; margin-top：270px; margin-left：20px; display：block;}。otherdiv {height：40vh;宽度：80％;背景：白色;位置：绝对; margin-top：270px; margin-left：20px; display：block;}。maxWidth {max-width：90％;}  

 < div id =contactclass =contact> < div class =container maxWidth> < H1>联系与LT; / H1> < div class =row> < div class =col-md-6> < p>一些文字。< / p> < div id =map>< / div> < / DIV> < div class =col-md-6> < div class =otherdiv>< / div> < / DIV> < / DIV> < / DIV> < / div>  

解决方案

您必须从您的div id和class中移除 position：absolute 属性。
如下所示，

  #map {
 height：40vh; 
宽度：80％; 
背景：白色; 
 margin-top：270px; 
 margin-left：20px; 
 display：block; 
} 
 
 .otherdiv {
 height：40vh; 
宽度：80％; 
背景：白色; 
 margin-top：270px; 
 margin-left：20px; 
 display：block; 
} 
  

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

I am making a website with a one-page layout, where every section is full-width and has the same height as the viewport. I use bootstrap to make the content inside these sections responsive, but my columns overlap (instead of stacking) when I decrease the viewport size and I can't figure out why.

Here is (part of) my css & html (hopefully it provides enough information to determine the problem):

.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>

解决方案

You have to remove position:absolute property from both of your div id and class. As follows,

#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;
}

Heres's CODEPEN example.Now it's stack properly.

这篇关于为什么我的引导列重叠？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！