Wie stapelt man Divs übereinander, wenn der Bildschirm kleiner wird? bootstrap

Question

Ich habe drei divs Seite an Seite, ich will sie übereinander stapeln, wenn der Bildschirm kleiner wird. stattdessen ändern sich die divs, wodurch der Inhalt schlecht aussieht.

Ich folgte das w3schools Tutorial (bootstrap_grid_stacked_to_horizontal) zu ihnen, indem sie in einem container div und row div zusätzlich zu dem Hinzufügen der Klasse col-lg-4 aber sie immer noch die Größe stapeln zu lassen.

Dieser relevante HTML und 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

Die CSS das Raster Bootstrap überschrieben wird. Setzen Sie die Boxen in den Bootstrap Rasterspalten, die wird automatisch Stapel auf xs Bildschirme ..

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

Wie Sie wissen Bootstrap 12 Spalten haben, so dass Sie col-xs-12 zusammen mit col-lg-4 dann für zusätzlichen kleinen Bildschirm hinzufügen müssen Jedes Div nimmt alle 12 Spalten.

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

und es ist gut, Tags für alle Größen hinzuzufügen. col-md- und auch für col-sm-.