如何在屏幕變小時將div彼此疊放在一起？引導

Question

我有三個並排的div，我希望它們在屏幕變小時彼此堆疊。相反，divs調整內容看起來很糟糕。

我跟着W3Schools的教程（bootstrap_grid_stacked_to_horizo​​ntal），使他們通過把他們container DIV和row DIV裏面除了堆放在添加類col-lg-4但他們仍然調整。

這是相關的HTML和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

的CSS是壓倒一切的引導電網。把箱子引導網格列內的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

正如你所知道的引導有12列，所以你需要用col-lg-4添加col-xs-12然後沿額外小屏幕每個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-。