如何在移动视图中禁用容器类？
答案 0 :(得分：1)
看起来你的代码中有一些关闭标签并没有真正关闭任何东西。即使在JSFiddle中，这些标签也以红色显示。
当我在here中删除它们时，页脚和版权之间的空白区域消失了。不确定这是不是你想要的，但通常不是一个好主意，有一个不合法的结束标签。
<meta charset="UTF-8">
<title>IDEO</title>
<link href="files/css/style.css" rel="stylesheet" type="text/css">
<link href="files/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="files/img/head.png" rel="shortcut icon">
<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link href="files/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<body>
<div id="header-container" class="menu-cursor navbar navbar-default navbar-fixed-top">
<p class="menu-logo">Logo</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span>
</div>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#" class="active">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
<ul class="small-menus">
<li><a href="#">Sample</a><a href="#">Sample</a><a href="#">Sample</a><a href="#">Sample</a><a href="#">Sample</a></li>
</ul>
</div>
</div>
<div class="container-fluid slider-section">
<div class="slider col-lg-8 col-md-8 col-sm-12">
<h1 class="slider-text-typewriting"> <a href="" class="typewrite" data-period="2000" data-type='[ "Sample Text 1", "Sample Text 2", "Sample Text 3", "Sample Text 4" ]'> <span class="wrap"></span> </a> </h1>
<h1 class="slider-text-typewriting"> <a href="" class="typewrite" data-period="2000" data-type='[ "Sample Text 1", "Sample Text 2", "Sample Text 3", "Sample Text 4" ]'> <span class="wrap"></span> </a> </h1>
<h1 class="slider-text-typewriting"> <a href="" class="typewrite" data-period="2000" data-type='[ "Sample Text 1", "Sample Text 2", "Sample Text 3", "Sample Text 4" ]'> <span class="wrap"></span> </a> </h1>
</div>
<div class="col-lg-3 col-md-3 slider-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p></p>
<p class="HomeHeader-ContactLink"><a href="#">Contact Us</a></p>
</div>
</div>
<ul class="Bands">
<div class="Band ThreeRichTilesBand WithinRowsOfBands">
<div class="container">
<div class="RichTile RichTile--small RichTile--left col-lg-4 col-md-4 col-sm-12">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/blog.png);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">Name</span></h3>
<h2 class="RichTile-Title"><span><a href="#">Sample heading text </a></span></h2>
</div>
</div>
</div>
<div class="RichTile RichTile--small RichTile--left col-lg-4 col-md-4 col-sm-12">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/blog.png);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">Case Study</span><span class="RichTile-TypeSecond">Name</span></h3>
<h2 class="RichTile-Title"><span><a href="#">Sample heading text </a></span></h2>
</div>
</div>
</div>
<div class="RichTile RichTile--small RichTile--left col-lg-4 col-md-4 col-sm-12">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/blog.png);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">blog</span><span class="RichTile-TypeSecond">Blog Name</span></h3>
<h2 class="RichTile-Title"><span><a href="#">Sample heading text </a></span></h2>
</div>
</div>
</div>
<!--</div>
<div class="container">-->
<div class="RichTile RichTile--small RichTile--left col-lg-4 col-md-4 col-sm-12">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/blog.png);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<!-- react-text: 102 --><!-- /react-text -->
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">Name</span></h3>
<h2 class="RichTile-Title"><span><a href="#">Sample heading text </a></span></h2>
</div>
</div>
</div>
<div class="RichTile RichTile--small RichTile--left col-lg-4 col-md-4 col-sm-12">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/blog.png);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<!-- react-text: 114 --><!-- /react-text -->
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">Case Study</span><span class="RichTile-TypeSecond">Name</span></h3>
<h2 class="RichTile-Title"><span><a href="#">Sample heading text </a></span></h2>
</div>
</div>
</div>
<div class="RichTile RichTile--small RichTile--left col-lg-4 col-md-4 col-sm-12">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/blog.png);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<!-- react-text: 127 --><!-- /react-text -->
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">blog</span><span class="RichTile-TypeSecond">Blog Name</span></h3>
<h2 class="RichTile-Title"><span><a href="#">Sample heading text </a></span></h2>
</div>
</div>
</div>
</div>
</div>
<div class="Band FeaturedTileBand FeaturedTileBand--left">
<div class="FeaturedTileBand-ImageContainer">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/blog-main.jpg);"></div>
</div>
<div class="FeaturedTileBand-Content">
<div class="Grid">
<div class="FeaturedTileBand-PlaceholderContainer">
<div class="FeaturedTileBand-Placeholder"></div>
</div>
<div class="FeaturedTileBand-MainContainer">
<div class="FeaturedTileBand-Main">
<div class="FeaturedTileBand-MainContent">
<h3 class="FeaturedTileBand-TypesRow">
<span class="FeaturedTileBand-Type">questions</span><!-- react-text: 146 --><!-- /react-text -->
</h3>
<h2 class="FeaturedTileBand-Title"><span><a href="#">Lorem Ipsum is simply dummy text of the printing </a></span></h2>
<div class="FeaturedTileBand-Divider"></div>
<p class="FeaturedTileBand-Dek">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
<a class="Button" href="#">See our response</a>
</div>
<!-- react-text: 153 --><!-- /react-text -->
</div>
</div>
</div>
</div>
</div>
<div class="container home-four">
<h2>Sample Heading</h2>
<ul>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
</ul>
</div>
<div class="container home-five">
<div>
<h2>Sample Heading</h2>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="Band PairTilesBand lightBlue WithinRowsOfBands">
<div class="Grid">
<div class="RichTile RichTile--small RichTile--left">
<div class="RichTile-Content">
<div class="RichTile-MainContainer">
<!-- react-text: 162 --><!-- /react-text -->
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">Case Study</span><span class="RichTile-TypeSecond">Names</span></h3>
<h2 class="RichTile-Title"><span><a href="#">Lorem Ipsum is simply dummy text of the printing</a></span></h2>
</div>
</div>
</div>
<div class="RichTile RichTile--medium RichTile--left">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/corporate.jpg);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<!-- react-text: 175 --><!-- /react-text -->
<h3>Case StudyNames</h3>
<h2 class="RichTile-Title"><span><a href="#">Lorem Ipsum is simply dummy text</a></span></h2>
<p class="more-link float-right"><a href="#">More <i class="fa fa-arrow-right"></i></a></p>
</div>
</div>
</div>
</div>
</div>
<div class="Band ThreeRichTilesBand WithinRowsOfBands">
<div class="Grid">
<div class="RichTile RichTile--small RichTile--left">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/corporate.jpg);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<!-- react-text: 190 --><!-- /react-text -->
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">Case Study</span><span class="RichTile-TypeSecond">Names</span></h3>
<h2 class="RichTile-Title"><span><a href="#">Lorem Ipsum is simply dummy </a></span></h2>
</div>
</div>
</div>
<div class="RichTile RichTile--small RichTile--left">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/corporate.jpg);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<!-- react-text: 203 --><!-- /react-text -->
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">Case Study </span><span class="RichTile-TypeSecond">Names</span></h3>
<h2 class="RichTile-Title"><span><a href="#">Lorem Ipsum is simply dummy text. </a></span></h2>
</div>
</div>
</div>
<div class="RichTile RichTile--small RichTile--left">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/corporate.jpg);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<!-- react-text: 216 --><!-- /react-text -->
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">blog</span><span class="RichTile-TypeSecond">Names</span></h3>
<h2 class="RichTile-Title"><span><a href="#">Lorem Ipsum is simply dummy text. </a></span></h2>
</div>
</div>
</div>
</div>
</div>
</ul>
<!--FOOTER-->
<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">
<!--footer start from here-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-lg-4 footerleft ">
<div class="logofooter"> Logo</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
<p><i class="fa fa-map-pin"></i> </p>
<p><i class="fa fa-phone"></i> </p>
<p><i class="fa fa-envelope"></i> E-mail : </p>
</div>
<div class="col-md-2 col-sm-6 col-lg-4 paddingtop-bottom">
<h6 class="heading7">GENERAL LINKS</h6>
<ul class="footer-ul">
<li><a href="#"> Career</a></li>
<li><a href="#"> Privacy Policy</a></li>
<li><a href="#"> Terms & Conditions</a></li>
<li><a href="#"> Client Gateway</a></li>
<li><a href="#"> Ranking</a></li>
<li><a href="#"> Case Studies</a></li>
<li><a href="#"> Frequently Ask Questions</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-6 col-lg-4 paddingtop-bottom">
<form action="" method="post">
<div class="input-prepend"><span class="add-on"><i class="icon-envelope"></i></span>
<input type="text" id="" name="" placeholder="your@email.com" class="form-control" style="width:200px;">
</div>
<br />
<input type="submit" class="btn btn-info" value="Subscribe Now!" />
</form>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 paddingtop-bottom">
</div>
<!--footer start from here-->
<!--footer start from here-->
<!--Pulling Awesome Font -->
<div class="copyright">
<div class="container" style="text-align: center;">
<div class="col-md-12">
<ul class="social-network social-circle">
<li><a href="#" class="icoRss" title="Rss"><i class="fa fa-rss"></i></a></li>
<li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="container" style="text-align: center;">
<div class="col-md-12">
<p>© 2016 -</p>
</div>
</div>
</div>
<script src="files/js/index.js"></script>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>