我正在使用 Bootstrap 4，但在移动设备 View 中让我的列相互堆叠时遇到了问题。每行内有两个 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>最佳答案
您可能错过了非常重要的响应式内容 meta:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
除了 col-sm-6(平板电脑或更大尺寸)，为了在移动设备上好看，您可能需要 col-6
最后，我认为您不需要为 overview 元素设置固定高度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
/*--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;*/
}
</style>
</head>
<body>
<!-- Overview Section One -->
<section id="overview1">
<div class="container-fluid">
<div class="row justify-content-left">
<div class="col-6 col-sm-6 overview-wrapper">
<div class="overview-content">
<img class="computer1" src="./img/computer1.png" alt="laptop image">
</div>
</div>
<div class="col-6 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-6 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-6 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-6 col-sm-6 overview-wrapper">
<div class="overview-content">
<img class="computer1" src="./img/computer3.png" alt="laptop image">
</div>
</div>
<div class="col-6 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>
</body>
</html>关于html - 我的 bootstrap 4 col-sm-6 行没有在移动设备上堆叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48697759/