當屏幕變小時，如何將div疊加在一起？ 引導

Question

我有三個div並排，我希望它們在屏幕變小時疊加在一起。 相反，div調整大小使內容看起來很糟糕。

我按照w3schools教程（bootstrap_grid_stacked_to_horizo​​ntal）通過將它們放入container div和row div中來使它們堆疊，除了添加類col-lg-4但它們仍然調整大小。

這是相關的HTML和CSS：

 .how-it-works-container{ padding: 50px; background-color: #C5B358; font-family: 'Montserrat', sans-serif; opacity: .8; text-align: center; width: 100% } .how-it-works-box{ padding: 30px; background-color: #D6C362; margin: 20px 5px; width: calc(30%); 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); } 

 <!-- 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正在覆蓋Bootstrap網格。 將框放在Bootstrap網格列中，這些列將自動堆疊在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

如你所知，bootstrap有12列，所以你需要添加col-xs-12和col-lg-4然后對於額外的小屏幕，每個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- 。