当屏幕变小时如何将 div 堆叠在一起？引导程序答案

【问题标题】：How to stack divs on top of each other when screen gets smaller? bootstrap当屏幕变小时如何将 div 堆叠在一起？引导程序
【发布时间】：2017-10-12 18:15:03
【问题描述】：

我有三个并排的 div，我希望它们在屏幕变小时后堆叠在一起。相反，div 调整大小使内容看起来很糟糕。

我按照 w3schools 教程 (bootstrap_grid_stacked_to_horizontal) 将它们堆叠在 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>

【问题讨论】：

将col-xs-12 添加到当前具有col-lg-4 的3 个div 中，这会将尺寸设置为您当前定位的xs 屏幕尺寸和lg 屏幕尺寸。
看看docs。您可以使用class="col-xs-4" 设置相同的宽度，它也适用于移动设备和桌面。或者就像@Toby 所说的class="col-xs-12 col-lg-4"
使用相同的代码，只需删除 'class="row"' 即可。

标签： html css twitter-bootstrap grid resize

【解决方案1】：

您知道引导程序有 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- 。

【讨论】：

【解决方案2】：

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>

【讨论】：