我有三个并排的 div,当屏幕变小时,我希望它们彼此堆叠。相反,div 会调整大小,使内容看起来很糟糕。
我按照 w3schools 教程 (bootstrap_grid_stacked_to_horizontal) 进行操作,除了添加类 col 之外,还通过将它们放入
但它们仍然调整大小。container
div 和 row
div 中来使它们堆叠起来-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>
最佳答案
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>
关于html - 当屏幕变小时如何将div堆叠在一起? Bootstrap ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43954450/