行不会在移动视图上崩溃

时间:2018-01-18 23:12:07

标签: html css twitter-bootstrap

我的引导行在移动视图中没有堆叠在彼此之上。我有一排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 &amp; 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 &amp; 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. &copy; 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>
&#13;
&#13;
&#13;

https://alex-carver.github.io/Smart-Carnival/

1 个答案:

答案 0 :(得分:2)

它们没有崩溃,因为您指定它们是不可摧毁的。

col-xs-*表示屏幕最小。

所以,3x col-xs-4是12,这是一个完整的行。