Bootstrap sütunlarım neden çakışıyor?

Question

Her sayfanın tam genişlikte ve görünüm yüksekliğiyle aynı yüksekliğe sahip olduğu tek sayfalık bir düzen ile bir web sitesi yapıyorum. Bu bölümlerin içeriklerini içeriye duyarlı hale getirmek için bootstrap kullanıyorum, ancak viewport boyutunu azalttığımda sütunlarım (yığın yerine) çakışıyor ve nedenini anlayamıyorum. İşte

(umarım sorunu belirlemek için yeterli bilgi sağlar) (parçası) benim css & html geçerli:

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

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

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

 
.maxWidth { 
 
\t max-width: 90%; 
 
}

<div id="contact" class="contact"> 
 
\t 
 
\t <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> 
 
\t 
 
</div>

Answer 1

bu bilgiyi bulabilirsiniz. As aşağıdaki , İşte en CODEPEN

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

düzgün yığını oluyor example.Now.

Answer 2

sütunlarınızdaki doğru ızgara görünüm kullandığınızdan emin olun .

Bootstrap'in dördünde (xs, sm, md ve lg) var ve tanımlı genişlikleri ve yukarısı için çalışıyorlar. Sütunları md ile ayarladığınızda, yalnızca en az 992 piksele sahip bir pencerede çalışırlar.

Bu sütunların her zaman ekranın yarısını kaplamasını istiyorsanız, col-xs-6 sınıfını kullanın.

Sen Sen div id ve sınıf hem position:absolute özelliğini kaldırmak zorunda Bootstrap's official documentation