我已经为自己创建了一个网站(作品集)，但每次将其调整到移动设备时，我都会在右侧看到一大块空白区域。
已经尝试过:
body {
overflow-x:hidden;
}
html, body{
overflow-x:hidden;
}
<div class="wrapper"> ->> added overflow-x:hidden; to .wrapper
这些都不起作用，我一辈子都找不到它。
非常感谢您的帮助! :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>martin mičulka</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Loading Bootstrap -->
<link href="css/vendor/bootstrap.min.css" rel="stylesheet">
<!-- Loading Flat UI -->
<link href="css/flat-ui.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="config.json" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<!--<link rel="shortcut icon" href="img/favicon.ico" -->
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/vendor/html5shiv.js"></script>
<script src="js/vendor/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--WZ-REKLAMA-1.0IZ--><div align="center"><table width="496" border="0"
cellspacing="0" cellpadding="0"><tr><td><a href="http://www.webzdarma.cz/"><img
src="http://i.wz.cz/banner/nudle03.gif" width="28" height="60"
style="margin: 0; padding: 0; border-width: 0" alt="WebZdarma.cz" /></a></td><td>
<noscript><div><a href='http://ad.wz.cz/openx/www/delivery/ck.php?n=a5977468&cb=123'><img src='http://ad.wz.cz/openx/www/delivery/avw.php?zoneid=26&cb=123&n=a5977468' style='margin: 0; padding: 0; border-width: 0' alt='' /></a></div></noscript>
</td></tr></table></div>
<!--WZ-REKLAMA-1.0IK-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">navigace</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 src="img/logo.png"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link" href="#home" data-loc="domu">DOMŮ</a></li>
<li><a class="nav-link current" href="#ome" data-loc="about">O MĚ</a></li>
<li><a class="nav-link center-block" href="#galerie" data-loc="galerie">GALERIE</a></li>
<li><a class="nav-link" href="#kontakt" data-loc="kontakt">KONTAKT</a></li>
</ul>
</div>
</div>
</nav>
<div class="fullscreen background parallax-window scroll-panel" data-parallax="scroll" data-image-src="img/pozadi/08.jpg" data-img-width="1920" data-img-height="1080" id="home">
<div class="content-a">
<div class="content-b">
<div class="container">
<h2 class="text-center welcome" ><span class="jmeno"><b>MARTIN MIČULKA</b></span></h2>
</div>
</div>
</div>
</div>
<!--========================ABOUT========================================-->
<section class="scroll-panel" id="ome">
<div class="container">
<h1 class="text-center" id="nadpisOme">O MĚ</h1>
<div class="col-md-12">
<p class="popis wow bounceInUp">Jmenuji se Martin Mičulka, je mi 18 let a jsem student 4 ročníku MěSOŠ Klobouky u Brna, zaměření na Informační technologie. Bydlím v Kyjově a mezi moje záliby patří, hudba, fitness a pc.</p>
</div>
<div class="col-md-4 text-center" id="kolecka">
<img class="img-circle wow fadeIn obrazKolecka" src="img/student.png">
<p class="muted wow bounce" id="textPodKoleckama"><b>Ochota učit se novým věcem</b><br>Nebráním se ani dalším programovacím jazykům abych rozšířil své zkušenosti a dovednosti.</p>
</div>
<div class="col-md-4 text-center" id="kolecka">
<img class="img-circle wow fadeIn obrazKolecka" src="img/responsive.png">
<p class="muted wow bounce" id="textPodKoleckama"><b>Přízpůsobivý</b><br>Přizpůsobím se Vašim požadavkům a budu se snažit udělat práci přesně podle Vašich představ.</p>
</div>
<div class="col-md-4 text-center" id="kolecka">
<img class="img-circle wow fadeIn obrazKolecka" src="img/calendar.png">
<p class="muted wow bounce" id="textPodKoleckama"><b>Rychlý</b><br>Svoji práci se snažím dělat rychle a v co nejkratším možném termínu.</p>
</div>
</div>
</section>
<!--=====================================GALERIE=============================-->
<section class="scroll-panel text-center" id="galerie">
<div class="jumbotron" style="color: white;background-color: #16a085;height: 800px;">
<div class="container">
<h1 class="text-center" style="padding-top:60px;">GALERIE</h1>
<!--=============OBRAZEK1============-->
<div class="col-md-4">
<div class="tilt">
<a href="http://www.odsnl.cz/"><img class="img-square wow fadeInUp obrazGalerie" src="img/galerie/galerie.jpg"></a>
</div>
</div>
<!--=============OBRAZEK2============-->
<div class="col-md-4">
<div class="tilt">
<a href="http://www.martinmiculka.wz.cz"><img class="img-square wow fadeInUp tilt obrazGalerie" src="img/galerie/galerie2.jpg"></a>
</div>
</div>
<div class="col-md-4">
<div class="tilt">
<a href="http://www.sosklobouky.cz/DIKYPR/index.html"><img class="img-square wow fadeInUp obrazGalerie" src="img/galerie/galerie3.jpg"></a>
</div>
</div>
<!--
<div class="col-md-4">
<div class="tilt">
<a href="#"> <img class="img-square wow fadeInUp" height="300px" width="300px" style="margin-top: 40px;background-color:#34495e;margin-bottom: 40px;"></a>
</div>
</div>
<div class="col-md-4">
<div class="tilt">
<a href="#"><img class="img-square wow fadeInUp" height="300px" width="300px" style="margin-top: 40px;background-color:#34495e;margin-bottom: 40px;"></a>
</div>
</div>
<div class="col-md-4">
<div class="tilt">
<a href="#"><img class="img-square wow fadeInUp" height="300px" width="300px" style="margin-top: 40px;background-color:#34495e;margin-bottom: 40px;"></a>
</div>
</div>
</div>
</div>-->
</div>
</div>
</section>
<!--================================KONTAKTY===========================-->
<section class="scroll-panel" id="kontakt">
<div class="container">
<h1 class="text-center" style="padding-top:60px;">KONTAKT</h1>
<div class="col-md-12">
<img src="img/iphone.png" class="center-block wow zoomIn obrazIphone" style="padding-top: 40px;">
<a href="#home"><button type="button" class="btn btn-inverse btn-lg pull-right sipkaNahoru"><span class="fui-triangle-up"></span></button></a>
</div>
</div>
</section>
<footer id="footer">
<div class="container">
<p class="text-center" style="font-size: 18px;">© Martin Mičulka, Kyjov, 2015</p>
</div>
</footer>
<!-- jQuery (necessary for Flat UI's JavaScript plugins) -->
<script src="js/vendor/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/flat-ui.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/fullbg.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script>
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
</script>
<script src="js/parallax.min.js"></script>
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https':'http')+'://ad.wz.cz/openx/www/delivery/ajs.php';
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=26");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'><\/scr"+"ipt>");
//]]>--></script>
</body>
</html>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body{
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
}
.navbar-default{
min-height: 100px;
}
.obrazGalerie{
margin-top: 100px;
}
/*TILT*/
.tilt {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.tilt:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.parallax-window {
min-height: 200px;
background: transparent;
text-align: center;
}
#textPodKoleckama{
text-align: center;
padding-top: 30px;
margin-bottom: 60px;
}
#kolecka{
padding-top: 60px;
}
.popis{
font-size: 28px;
padding-top: 30px;
text-align: center;
}
#footer {
height: 60px;
background-color:#7f8c8d;
margin-top: 50px;
padding-top: 20px;
padding-bottom: 20px;
color: white;
font-weight: 700;
}
#nadpisOme{
padding-top: 100px;
font-size: 75px;
}
#about{
padding-top: 30px;
font-size: 28px;
text-align: center;
}
.navbar-brand {
list-style-type: none;
margin: .7em;
padding: .5em;
}
.navbar-toggle {
margin: 1em;
padding: .5em;
}
.welcome {
color: white;
font-size: 72px;
}
.jmeno {
display: inline-block;
border: white solid 10px;
padding: 0.5em;
}
$flex-legacy-enabled: true;
li {
text-align: center;
vertical-align: middle;
display: inline-block;
@include display-flex(inline-flex);
/* vertical centering for legacy, horizontal centering for modern */
@include justify-content(center);
/* modern Flexbox only */
@include align-items(center, $legacy: false);
/* legacy Flexbox only */
@include legacy-flex-direction(column);
}
/* pretty it up! */
ul {
list-style-type: none;
margin: 0;
padding: .5em;
}
li {
margin: .5em;
padding: .5em;
}
/* background setup */
.background {
background-repeat:no-repeat;
/* custom background-position */
background-position:50% 50%;
/* ie8- graceful degradation */
background-position:50% 50%9 !important;
}
/* fullscreen setup */
html, body {
/* give this to all tags from html to .fullscreen */
height:100%;
}
.fullscreen,
.content-a {
width:100%;
min-height:100%;
}
.not-fullscreen,
.not-fullscreen .content-a,
.fullscreen.not-overflow,
.fullscreen.not-overflow .content-a {
height:100%;
overflow:hidden;
}
/* content centering styles */
.content-a {
display:table;
}
.content-b {
display:table-cell;
position:relative;
vertical-align:middle;
text-align:center;
}
@media (max-width: 767px) {
.fotka {
margin-top: 60px;
}
.welcome {
font-size: 22px;
}
.obrazGalerie{
height: 150px;
width: 150px;
margin-top: 30px;
}
.obrazKolecka{
height: 150px;
width: 150px;
}
.popis {
font-size: 20px !important;
}
.obrazIphone{
height: 290px;
width: 154px;
}
h1{
font-size: 50px !important;
}
}
最佳答案
好吧，伙计们，它开始工作了，托管我的网站在我的导航栏下有广告，这导致了空白!
如您所见，我将我的网站转移到了另一个主机，它的广告位于页面底部，并且只有文字。
关于html - 在移动设备上 Bootstrap 侧滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27906586/