ブートストラップカラムが重複するのはなぜですか？

Question

私はすべてのセクションが全幅で、ビューポートと同じ高さを持つ1ページレイアウトのウェブサイトを作っています。私はブートストラップを使用してこれらのセクション内のコンテンツを反応させますが、ビューポートサイズを小さくすると（スタッキングする代わりに）カラムが重なってしまい、その理由がわかりません。

.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

にこの情報を見つけることができます。以下の 、相続人の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; 
} 

それが適切に積み重ねていますexample.Now。

Answer 2

あなたの列に正しいグリッドビューポートを使用してください：ここで

は私のcss & HTML（うまくいけば、それは問題を決定するために十分な情報を提供します）（の一部）であります。

ブートストラップには4つ（xs、sm、md、lg）があり、定義された幅以上に動作します。 mdで列を設定すると、少なくとも992pxのウィンドウでのみ動作します。

これらの列が常に画面の半分を占めるようにする場合は、col-xs-6クラスを使用します。

あなたは、あなたのdiv idとクラスの両方からposition:absoluteプロパティを削除する必要がBootstrap's official documentation