【发布时间】：2018-07-19 17:56:19
【问题描述】：
我正在使用 Bootstrap 4，但无法让我的列在移动视图中堆叠在一起。我每行有两个 col-sm-6。我确信这是一个简单的修复，但我似乎无法弄清楚。任何帮助将不胜感激，谢谢！
这是网站的链接https://alex-carver.github.io/Ananomouse/
/*--Overview Header one--*/
h3.overview-header{
margin-bottom: 5px;
font-weight: 500;
font-family: 'OSP-DIN' , sans-serif;
font-style: bold;
font-size: 60px;
letter-spacing: 2px;
margin-top: 10px;
color: #E7643B ;
}
/*--Overview Header Two--*/
h3.overview-header2{
margin-bottom: 5px;
font-weight: 500;
font-family: 'OSP-DIN' , sans-serif;
font-style: bold;
font-size: 60px;
letter-spacing: 2px;
margin-top: 10px;
color: #777;
}
/*--Overview Header Three--*/
h3.overview-header3{
margin-bottom: 5px;
font-weight: 500;
font-family: 'OSP-DIN' , sans-serif;
font-style: bold;
font-size: 60px;
letter-spacing: 2px;
margin-top: 10px;
color: #812E14;
}
/*--Overview Sub Headers--*/
h4{
font-family: 'Bebas Neue' , sans-serif;
font-size: 40px;
color: #9B3718;
font-weight: 600;
font-style: normal;
letter-spacing: 1px;
margin-bottom:0;
margin-top: 30px;
}
/*--Overview Paragraphs--*/
p.lead2{
font-size: 25px;
color: #333;
font-weight: bold;
letter-spacing: 1px;
font-style: normal;
font-family: 'Bebas Neue' , sans-serif;
padding-top: 20px;
}
/*--Footer Paragraphs--*/
p.lead3{
font-size: 20px;
color: #333;
font-weight: 300;
letter-spacing: 1px;
font-style: normal;
font-family: 'Bebas Neue' , sans-serif;
}
/*--Overview One---*/
section#overview1{
background: -webkit-linear-gradient(left,#E7643B 50%, #fff 50%);
background: -o-linear-gradient(left, #E7643B 50%, #fff 50%);
background: linear-gradient(to right, #E7643B 50%, #fff 50%);
width: 100%;
height: 700px;
}
/*--Overview Two---*/
section#overview2{
background: -webkit-linear-gradient(left, #fff 50%, #777 50%);
background: -o-linear-gradient(left, #fff 50%, #777 50%);
background: linear-gradient(to right, #fff 50%, #777 50%);
width: 100%;
border-bottom: 2px solid #eee;
height: 700px;
}
/*--Overview Three---*/
section#overview3{
background: -webkit-linear-gradient(left, #812E14 50%, #fff 50%)!important;
background: -o-linear-gradient(left, #812E14 50%, #fff 50%)!important;
background: linear-gradient(to right, #812E14 50%, #fff 50%)!important;
width: 100%;
height: 700px;
}
.overview-wrapper{
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
height: 650px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Overview Section One -->
<section id="overview1">
<div class="container-fluid">
<div class="row justify-content-left">
<div class=" col-sm-6 overview-wrapper">
<div class="overview-content">
<img class="computer1" src="./img/computer1.png" alt="laptop image">
</div>
</div>
<div class=" col-sm-6 overview-wrapper">
<div class="overview-content2">
<h3 class="overview-header">Overview Header One</h3><!--Header-->
<h4>Sub Header</h4><!--sub header-->
<!-- sub text -->
<p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
<p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
</div>
</div>
</div>
</div><!-- container -->
</section>
<!-- Overview Section 2 -->
<section id="overview2">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-6 text-left overview-wrapper">
<div class="overview-content2">
<h3 class="overview-header2">Overview Header Two</h3><!--Header-->
<h4>Sub Header</h4><!--sub header-->
<!-- sub text -->
<p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
<p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
</div> </div>
<div class="col-sm-6 text-center overview-wrapper">
<div class="overview-content">
<img class="computer1" src="./img/computer2.png" alt="laptop image">
</div>
</div>
</div>
</div> <!-- container -->
</section>
<!-- Overview Section 3 -->
<section id="overview3">
<div class="container-fluid">
<div class="row justify-content-left">
<div class="col-sm-6 overview-wrapper">
<div class="overview-content">
<img class="computer1" src="./img/computer3.png" alt="laptop image">
</div>
</div>
<div class="col-sm-6 overview-wrapper">
<div class="overview-content2">
<h3 class="overview-header3">Overview Header Three</h3><!--Header-->
<h4>Sub Header</h4><!--sub header-->
<!-- sub text -->
<p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
<p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
</div>
</div>
</div>
</div><!-- container -->
</section>【问题讨论】：
标签： html css bootstrap-4 responsive