画面が小さくなるとdivsを重ねる方法は？ブートストラップ

Question

私は横に3つのdivを持っていますが、画面が小さくなると、それらを重ねて重ねるようにします。代わりに、divのサイズを変更するとコンテンツが見苦しくなります。

私は彼らがクラスcol-lg-4を追加することが、彼らはまだ、サイズ変更に加えてcontainerのdivとrow divの内側にそれらを置くことによってスタックにするためにW3Schoolsのチュートリアル（bootstrap_grid_stacked_to_horizo​​ntal）が続きます。

これは、関連するHTMLとCSSです：CSSはブートストラップグリッドをオーバーライドしている

.how-it-works-container{ 
 
    \t padding: 50px; 
 
    \t background-color: #C5B358; 
 
    \t font-family: 'Montserrat', sans-serif; 
 
    \t opacity: .8; 
 
    \t text-align: center; 
 
    
 
    \t width: 100% 
 
    } 
 
    
 
    .how-it-works-box{ 
 
    \t padding: 30px; 
 
    \t background-color: #D6C362; 
 
    \t margin: 20px 5px; 
 
    \t 
 
    \t width: calc(30%); 
 
    \t overflow-wrap: break-word; 
 
    \t color: white; 
 
    \t display: inline-block; 
 
    \t box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
    }

<!-- How It Works section --> 
 
<div class="how-it-works-container container"> 
 

 
    <h2>How It Works</h2> 
 

 
    <div class="row"> 
 

 
     <div class="how-it-works-box col-lg-4"> 
 
     <img src=" {% static "images/meetlocals3.svg" %} "> 
 
     <h3>Meet Local People</h3> 
 
     <p>Meet like-minded locals who could show you around their city.</p> 
 
     </div> 
 

 
     <div class="how-it-works-box col-lg-4"> 
 
     <img src=" {% static "images/showpeople.svg" %} "> 
 
     <h3>Show Visitors Around</h3> 
 
     <p>Show visitors around and meet interesting international visitors.</p> 
 
     </div> 
 

 
     <div class="how-it-works-box col-lg-4"> 
 
     <img src=" {% static "images/makefriends.svg" %} "> 
 
     <h3>Make New Friends!</h3> 
 
     <p>Walking around is a fun bonding activity to make new friends!</p> 
 
     </div> 
 

 
    </div> 
 
</div>

Answer 1

。あなたは余分な小さな画面のために、その後col-lg-4と一緒にcol-xs-12を追加する必要がありますので、ブートストラップは、12列を持って知っているようXS画面のだろう自動スタック..

http://www.codeply.com/go/gTkC50Paql

.how-it-works-container{ 
    padding: 50px; 
    background-color: #C5B358; 
    font-family: 'Montserrat', sans-serif; 
    opacity: .8; 
    text-align: center; 
} 

.how-it-works-box{ 
    width: 100%; 
    padding: 30px; 
    background-color: #D6C362; 
    margin: 20px 5px; 
    overflow-wrap: break-word; 
    color: white; 
    display: inline-block; 
    box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
} 

<div class="how-it-works-container container-fluid"> 
    <h2>How It Works</h2> 
    <div class="row"> 
     <div class="col-lg-4"> 
      <div class="how-it-works-box"> 
       <img src=""> 
       <h3>Meet Local People</h3> 
       <p>Meet like-minded locals who could show you around their city.</p> 
      </div> 
     </div> 
     <div class="col-lg-4"> 
      <div class="how-it-works-box"> 
       <img src=""> 
       <h3>Show Visitors Around</h3> 
       <p>Show visitors around and meet interesting international visitors.</p> 
      </div> 
     </div> 
     <div class="col-lg-4"> 
      <div class="how-it-works-box"> 
       <img src=""> 
       <h3>Make New Friends!</h3> 
       <p>Walking around is a fun bonding activity to make new friends!</p> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

ブートストラップグリッド列内のボックスを置きますすべてのdivはすべて12列を使用します。

<div class="col-lg-4 col-xs-12"> 
      <div class="how-it-works-box"> 
       <img src=""> 
       <h3>Meet Local People</h3> 
       <p>Meet like-minded locals who could show you around their city.</p> 
      </div> 
     </div> 
     <div class="col-lg-4 col-xs-12"> 
      <div class="how-it-works-box"> 
       <img src=""> 
       <h3>Show Visitors Around</h3> 
       <p>Show visitors around and meet interesting international visitors.</p> 
      </div> 
     </div> 
     <div class="col-lg-4 col-xs-12"> 
      <div class="how-it-works-box"> 
       <img src=""> 
       <h3>Make New Friends!</h3> 
       <p>Walking around is a fun bonding activity to make new friends!</p> 
      </div> 
     </div> 

です。すべてのサイズにタグを追加するとよいでしょう。 col-md-およびcol-sm-についても同様である。