Html 移动设备上的引导端滚动_Html_Css_Twitter Bootstrap

Html 移动设备上的引导端滚动

html css twitter-bootstrap

Html 移动设备上的引导端滚动,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我为自己创建了一个网站（公文包），但每次它被调整到移动设备的大小时，我都会在右侧看到biiig空白已尝试： body { overflow-x:hidden; } html, body{ overflow-x:hidden; } <div class="wrapper"> ->> added overflow-x:hidden; to .wrapper 正文{ 溢出x：隐藏； } html，正文{ 溢出x：隐藏； } ->>添加溢出-x：隐藏；包装纸这些都没用

我为自己创建了一个网站（公文包），但每次它被调整到移动设备的大小时，我都会在右侧看到biiig空白

已尝试：

body {
overflow-x:hidden;
}

html, body{
overflow-x:hidden;
}

<div class="wrapper"> ->> added overflow-x:hidden; to .wrapper

正文{
溢出x：隐藏；
}
html，正文{
溢出x：隐藏；
}
->>添加溢出-x：隐藏；包装纸

这些都没用，我一辈子都找不到

每一个帮助都是值得的！：）


马丁·米丘尔卡
航海






马丁·米丘尔卡
O MĚ
Jmenuji se Martin Mičulka，je Mi 18让一名jsem的学生4 ročníku MěSOŠKlobouky u Brna，zaměenína Informa nínítechnice。Bydlím v Kyjověa mezi moje záliby patří，hudba，健身pc
Ochota učit se novým věcem
Nebráním se ani dalšm dalšm jazykům abych rozšřil sv zku enosti a dovednosti.
přzpůsobivý
přizpůsobům se Vašim požadavkům a budu se snažit uděpr aci přesněpodle Vašich edstav
Rychlý
Svoji práci se snažm dě283; lat rychle a v co nejkratšm možném termínu
加利里
康塔克
©Martin Mičulka，Kyjov，2015
$（文档）.ready（函数（）{
$（'a[href^=“#“]”）。关于（'click'，函数（e）{
e、 预防默认值（）；
var target=this.hash；
$target=$（target）；
$（'html，body'）.stop（）.animate({
'scrollTop'：$target.offset（）.top
}，900，“摆动”，功能（）{
window.location.hash=目标；
});
});
});
新的WOW（）.init（）；
@导入url(http://fonts.googleapis.com/css?family=Open+Sans:400700）；
身体{
字体系列：“开放式Sans”，无衬线；
溢出x：隐藏；
}
.navbar默认值{
最小高度：100px；
}
obrazGalerie先生{
边缘顶部：100px；
}
/*倾斜*/
.倾斜{
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
-ms过渡：所有0.5s轻松；
过渡：所有0.5s缓解；
}
.倾斜：悬停{
-webkit变换：旋转（-10度）；
-moz变换：旋转（-10度）；
-o变换：旋转（-10度）；
-ms变换：旋转（-10度）；
变换：旋转（-10度）；
}
.视差窗口{
最小高度：200px；
背景：透明；
文本对齐：居中；
}
#textPodKoleckama{
文本对齐：居中；
填充顶部：30px；
边缘底部：60px；
}
#科莱卡{
填充顶部：60px；
}
波皮斯先生{
字号：28px；
填充顶部：30px；
文本对齐：居中；
}
#页脚{
高度：60px；
背景色：#7f8c8d；
边缘顶部：50px；
填充顶部：20px；
垫底：20px；
颜色：白色；
字号：700；
}
#纳德皮索姆{
填充顶部：100px；
字体大小：75px；
}
#关于{
填充顶部：30px；
字号：28px；
文本对齐：居中；
}
.navbar品牌{
列表样式类型：无；
边缘：.7em；
填充：.5em；
}
.导航栏切换{
边缘：1米；
填充：.5em；
}
.欢迎{
颜色：白色；
字体大小：72px；
}
杰梅诺先生{
显示：内联块；
边框：白色固体10px；
填充：0.5em；
}
$flex legacy enabled:true；
李{
文本对齐：居中；
垂直对齐：中间对齐；
显示：内联块；
@包括显示flex（内联flex）；
/*垂直居中用于传统，水平居中用于现代*/
@包括内容（中心）；
/*仅限现代Flexbox*/
@包括对齐项目（居中$legacy:false）；
/*仅限传统Flexbox*/
@包括传统弯曲方向（列）；
}
/*漂亮点*/
保险商实验室{
列表样式类型：无；
保证金：0；
填充：.5em；
}
李{
边缘：.5em；
填充：.5em；
}
/*背景设置*/
.背景{
背景重复：无重复；
/*自定义背景位置*/
背景位置：50%50%；
/*ie8-优美退化*/
背景职位：50%50%9！重要；
}
/*全屏设置*/
html，正文{
/*将此设置为从html到.fullscreen的所有标记*/
身高：100%；
}
.全屏，
.content-a{
宽度：100%；
最小高度：100%；
}
.不是全屏，
.不是全屏。内容a，
.fullscreen.not-overflow，
.fullscreen.not-overflow.content-a{
身高：100%；
溢出：隐藏；
}
/*内容中心样式*/
.content-a{
显示：表格；
}
.content-b{
显示：表格单元格；
位置：相对位置；
垂直对齐：中间对齐；
文本对齐：居中；
}
@介质（最大宽度：767px）{
福特卡先生{
边缘顶部：60像素；
}
.欢迎{
字体大小：22px；
}
obrazGalerie先生{
高度：150像素；
宽度：150px；
边缘顶部：30px；
}
obrazKolecka先生{
高度：150像素；
宽度：150px；
<!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&amp;cb=123'><img src='http://ad.wz.cz/openx/www/delivery/avw.php?zoneid=26&amp;cb=123&amp;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 ('&amp;cb=' + m3_r);
   if (document.MAX_used != ',') document.write ("&amp;exclude=" + document.MAX_used);
   document.write (document.charset ? '&amp;charset='+document.charset : (document.characterSet ? '&amp;charset='+document.characterSet : ''));
   document.write ("&amp;loc=" + escape(window.location));
   if (document.referrer) document.write ("&amp;referer=" + escape(document.referrer));
   if (document.context) document.write ("&context=" + escape(document.context));
   if (document.mmm_fo) document.write ("&amp;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;
    }

     }