我的引导行在移动视图中没有堆叠在彼此之上。我有一排3个cols和一排4个cols。没有折叠的行是#about部分中的.about-content行，而#member部分中有4个col行。任何帮助将不胜感激，谢谢！这是网站：https://alex-carver.github.io/Smart-Carnival/
/*element style--------*/
section{
margin-top: 100px;
margin-bottom: 100px;
width: 100%;
}
hr{
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #c1282d;
height: 4px;
}
.hr-2{
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #fff;
height: 4px;
}
h1, h2{
font-family: 'chunkfiveregular' , sans-serif;
}
h2{
font-size: 45px;
color: #020304;
}
p{
font-family:'proxima_novasemibold' , sans-serif;
}
/*---nav styles----------*/
nav, .navbar .navbar-default{
margin-bottom: 0!important;
height: 80px;
}
.navbar-default {
background-color: #fff;
border-color: transparent;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 80px;
z-index: 4;
opacity: .9;
}
.navbar-right {
margin-right: 20px;
padding-top: 25px;
background:transparent!important;
}
.navbar-default .navbar-brand {
color:#c1282d;
}
.navbar-brand .logo{
float: left;
height: 60px;
padding-bottom: 10px;
}
.navbar-default .navbar-nav>li>a {
color:#c1282d;
font-size: 22px;
background:#fff;
font-family: 'proxima_novasemibold', sans-serif;
font-weight: 400;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
color: #fff;
background-color: #c1282d;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #c1282d;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
color:#fff;
}
.dropdown-menu>li>a{
color: #fff;
font-size: 15px;
}
.navbar-right{
margin-right: 20px;
}
/*-------header styles-------*/
header{
width:100%;
height: 710px;
background:url(../img/header2.png);
background-position: center;
background-repeat: no-repeat;
margin:0;
padding: 0;
}
.jumbotron{
background: transparent;
margin-top: 45px;
color:#fff;
width:100%;
}
.header-text-color{
color: #c1282d;
font-size: 90px;
}
.jumbotron h1{
margin-bottom: 25px;
font-size: 80px;
letter-spacing: 3px;
font-family: 'chunkfiveregular' , sans-serif!important;
}
.jumbotron p {
margin-bottom: 25px;
font-size: 30px;
font-family: 'proxima_novasemibold' , sans-serif;
}
.btn-primary{
background:#c1282d;
color:#fff;
border:none;
box-shadow: 3px 5px 5px rgba(0,0,0,0.5);
margin-right: 20px;
font-family: 'proxima_novathin' , sans-serif;
padding:15px;
}
.btn-primary:hover{
background:#fff;
color: #c1282d;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
.photos-btn{
background:#828383;
color: #fff;
}
.social-icons {
margin-left: 20px;
margin-top: 5px;
}
.social-icons a{
color: #fff;
}
.social-icons a:hover{
color: #c1282d;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
i {
margin-right: 5px;
}
/*-------------About Section----------*/
.about-text-color{
color:#c1282d;
font-size: 50px;
}
.about-content{
height: 400px;
text-align: center;
padding:20px;
font-size: 20px;
font-family: 'proxima_novasemibold' , sans-serif;
}
.about-text{
padding:50px;
font-size: 30px;
background: #f2f2f2;
border-radius: 10px;
margin-top: 20px;
color: #020304;
}
/*-------Team Section Styles---------*/
#team{
height: 520px;
border-top: 1px solid #828383;
}
.member-heading{
margin-top: 40px;
}
.member-text-color{
color: #c1282d;
font-size: 50px;
}
.member-wrapper{
background:#fff;
border-radius: 10px;
padding:20px;
box-shadow: 6px 5px 5px rgba(0,0,0,0.5);
margin-left: auto;
margin-right: auto;
}
.member-content{
background:#c1282d;
text-align: center;
padding:20px;
color: #020304;
font-family: 'proxima_novasemibold' , sans-serif;
margin-top:20px;
}
/*----------Footer Styles------------*/
footer{
width: 100%;
text-align: center;
margin:0;
}
.footer-logo{
height: 100px;
width: 300px;
text-align: center;
}
/*----------media queries----------*/
@media (max-width: 767px){
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: 100%;
margin-top: 0;
background-color:#c1282d;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: #020304;
}
.navbar-default .navbar-nav>li>a {
color: #c1282d;
font-size: 22px;
background: #fff;
font-family: 'Roboto', sans-serif;
font-weight: 400;
border:1px, solid #000;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
color: #020304;
background-color: #fff;
}
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
.navbar-brand {
float: left;
height: 50px;
padding: 15px 30px;
font-size: 30px;
line-height: 20px;
font-weight: 400;
font-family: 'Roboto', sans-serif;
}
.navbar-default .navbar-toggle {
border-color: #c1282d;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #c1282d;
}
header{
width:100%;
height: 670px;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url("../img/header2.png") no-repeat center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin:0;
padding: 0;
}
.jumbotron{
background: transparent;
margin-top: 120px;
color:#fff;
padding-bottom: 0px;
margin-bottom: 0px;
}
.social-icons-small a{
color: #fff;
}
.social-icons-small a:hover{
color: #c1282d;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
#team{
height: 800px;
border-top: 1px solid #828383;
}
.jumbotron h1{
margin-bottom: 20px;
font-size: 40px;
letter-spacing: 3px;
font-family: 'chunkfiveregular' , sans-serif!important;
}
.header-text-color{
color: #c1282d;
font-size: 40px;
}
/*-------------About Section----------*/
h2{
font-size: 40px;
color: #020304;
}
.about-text-color{
color:#c1282d;
font-size: 40px;
}
.about-content{
height: 400px;
padding:20px;
font-size: 20px;
font-family: 'proxima_novasemibold' , sans-serif;
}
.about-text{
padding:50px;
font-size: 20px;
background: #f2f2f2;
border-radius: 10px;
margin-top: 20px;
color: #020304;
text-align: left;
}
/*-------Team Section Styles---------*/
#team{
width: 100%;
border-top: 1px solid #828383;
height: 400px;
}
.member-heading{
margin-top: 40px;
}
.member-text-color{
color: #c1282d;
font-size: 40px;
}
.member-wrapper{
background:#fff;
border-radius: 10px;
padding:20px;
box-shadow: 6px 5px 5px rgba(0,0,0,0.5);
width: 100%;
}
.member-content{
background:#c1282d;
text-align: center;
padding:0px;
color: #020304;
font-family: 'proxima_novasemibold' , sans-serif;
margin-top:20px;
font-size: 15px;
}
.photos-btn{
background:#828383;
color: #fff;
}
}<!DOCTYPE html>
<html lang="eng">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./css/custom.css">
<title>Smart Carnival</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img class="logo img-responsive" src="./img/logo.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="findmyphotos.html">Find My Photos</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Us <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#about">Why Smart Carnival</a></li>
<li><a href="#">The Team</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Clients <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="products.html">Products</a></li>
<li><a href="valueproposition.html">Value Proposition</a></li>
<li><a href="pricing.html">Pricing</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<header>
<div class="container">
<div class="jumbotron">
<h1><span class="header-text-color">S</span>mart <span class="header-text-color">C</span>arnival</h1>
<p>Modernizing and Amplifying the Attractions<br>and Amusements Industry.</p>
<p class="contact-button"><a class="btn btn-primary btn-lg" href="#" role="button">Contact Us</a><span><a class="photos-btn btn btn-primary btn-lg" href="#" role="button">Find My Photos</a></span></p>
</div>
</div>
</header>
<section id="about">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h2>Why<span class="about-text-color"> Smart Carnival</span></h2>
<hr>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<p class="about-text">
Smart Carnival’s mission is to modernize the amusement, carnival and inflatables industries with hardware and software that enhances the <br>carnival-goer’s experience and enhances revenue for its customers.
</p>
</div>
</div>
<div class="row about-content">
<div class="col-xs-4">
<img class="img-responsive" src="./img/camera.png">
<p class="text-content" >Smart Carnival’s camera is waterproof and has a super hydrophobic lens, so water will never ruin your photo. </p>
</div>
<div class="col-xs-4">
<img class="img-responsive" src="./img/photos.png">
<p class="text-contentt">Photos and slow motion videos can be edited, clipped, filtered downloaded straight to your phone or shared on social media! No other company offers as seamless a photo experience.</p>
</div>
<div class="col-xs-4">
<img class="img-responsive" src="./img/battery.png">
<p class="text-content">With an 8 hour battery life, Smart Carnival captures the special and fun moments all day long without needing to be recharged or replaced.</p>
</div>
</div>
</div>
</section>
<section id="team">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h2 class="member-heading">The<span class="member-text-color"> Smart Carnival </span>Team</h2>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row member-content">
<div class="col-xs-3">
<div class="member-wrapper">
<img class="img-responsive" src="./img/member1.png">
<p class="text-content" >Jesse Ou<br>
Founder & CEO</p><br>
<p class="text-content">Lead Security Engineer,<br><a href="salesforce.com">Salesforce.com</a></p>
</div>
</div>
<div class="col-xs-3">
<div class="member-wrapper">
<img class="img-responsive" src="./img/member2.png">
<p class="text-content" >Larry Trowell<br>
CTO</p><br>
<p class="text-content">Principal Consaltunt,<br><b>Synopsys</b></p>
</div>
</div>
<div class="col-xs-3">
<div class="member-wrapper">
<img class="img-responsive" src="./img/member3.png">
<p class="text-content" >Josh Johns<br>
Co Founder & Sales</p><br>
<p class="text-content">Owner<br><b>J. Johns Studios</b></p>
</div>
</div>
<div class="col-xs-3">
<div class="member-wrapper">
<img class="img-responsive" src="./img/member4.png">
<p class="text-content" >Sara Abernethy<br>
Director of Business Development</p><br>
<p class="text-content"><b>Senior Strategist,<br>Idea Couture</b></p>
</div>
</div>
</div>
</div>
</section>
<!-- ==========================
FOOTER SECTION
=========================== -->
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 text-center">
<img class="footer-logo" src="./img/logo.png">
<p>All Rights Reserved. © 2018 Smart Carnival</p>
</div>
</div>
</div>
</footer>
<!-- ==========================
FOOTER SECTION END
=========================== -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
答案 0 :(得分：2)
它们没有崩溃，因为您指定它们是不可摧毁的。
col-xs-*表示屏幕最小。
所以，3x col-xs-4是12，这是一个完整的行。