html - 在移动设备上 Bootstrap 侧滚动-6ren

html - 在移动设备上 Bootstrap 侧滚动

转载作者：行者123 更新时间：2023-11-28 08:38:43

我已经为自己创建了一个网站(作品集)，但每次将其调整到移动设备时，我都会在右侧看到一大块空白区域。

已经尝试过:

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&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;
    }

     }

实时网站是:http://www.martinmiculka.wz.cz

最佳答案

好吧，伙计们，它开始工作了，托管我的网站在我的导航栏下有广告，这导致了空白!

http://martinmiculka.mzf.cz/

如您所见，我将我的网站转移到了另一个主机，它的广告位于页面底部，并且只有文字。

关于html - 在移动设备上 Bootstrap 侧滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27906586/

文章推荐： javascript - 无法在 js 生成的表中设置 td 宽度

文章推荐： c# - 如何过滤 dxChart 数据

文章推荐： ios - UI 更新在不同情况下表现不同

文章推荐： css - margin 崩溃

javascript - 阻止 body 滚动，但阻止触摸设备上的任何父 div 滚动
如果附加了 'not-scroll' 类，我希望我的 body 不滚动，否则它应该正常工作。我已经搜索这个问题两天了，但找不到任何适合我的解决方案。我想要的是向 body 添加一个 class，并
iOS Safari - 滚动 iFrame 导致下面的 div 滚动
我发现似乎是 iOS Safari 中的错误(我正在 iOS 8 上进行测试)。当绝对定位的 iFrame 漂浮在一段可滚动内容上方时，滚动 iFrame 也会滚动下面的内容。以下 HTML (ava
javascript - 如何启用 Safari 滚动 SVG(滚动 div 中的对象标签)？
我有以下代码来显示一系列投资组合图片，这些图片以 SVG 格式存储在滚动 div 中: 在 Safari 中滚动使用两根手指或鼠标滚轮当光标位于 SVG 之一上时不起作用。该页
Javascript 滚动
我想用 javascript 做的是: 一旦你向下滚动页面，将#sidebar-box-fixed 的位置从 position: relative; 更改为定位:固定；。改回position:rela
Elasticsearch 滚动
我对 Elasticsearch 的滚动功能有点困惑。在 elasticsearch 中，每当用户在结果集上滚动时，是否可以每次调用搜索 API？来自文档 "search_type" => "scan
Javascript 滚动
我试图做到这一点，以便当我向上或向下滚动页面时，它会运行不同的相应功能。我发现了一个类似的问题here但我已经尝试了他们的答案并且没有运气。注意:此页面没有正常显示的滚动条。没有地方可以滚动。 bo
gtk - 滚动 GtkDrawingArea
(C语言，GTK库) 在我的表单上，我有一个 GtkDrawingArea 小部件，我在上面使用 Cairo 绘制 GdkPixbufs(从文件加载)。我想要完成的是能够在窗口大小保持固定的情况下使用
SwiftUI 滚动/列表滚动事件
最近我一直在尝试创建一个拉到(刷新，加载更多)swiftUI ScrollView !!，灵感来自 https://cocoapods.org/pods/SwiftPullToRefresh 我正在努
jquery - 拖放 + 滚动
我正在开发一个应用程序，其中有两个带有可放置区域的列表和一个带有可拖动项目的侧面菜单。当我滚动屏幕时，项目的位置困惑。我试图在谷歌上寻找一些东西，最后得到了这个问题:jQuery draggabl
iphone - UIWebView 滚动
我在 UIWebView 中加载了一个 HTML 表单，而我的 UIWebView 恰好从 View 的中间开始并扩展。我必须锁定此 webView 不滚动并将其放在 ScrollView 之上以允许
javascript - 每个元素上的淡入淡出 - 滚动
如何在每个元素而不是整个元素上应用淡入淡出(与其高度相比)？ HTML: CSS: * { padding: 0; margin: 0; box-sizing: border
flutter - 滚动 PageView
我想使用带有垂直轴的 PageView 并使用鼠标滚动在页面之间移动，但是当我使用鼠标滚动时页面不滚动...仅页面单击并向上/向下滑动时滚动。有什么办法吗？我想保留属性 pageSnapping:
java - JTextField 滚动
我制作这个程序是为了好玩，但我被卡住了，因为程序在屏幕外运行。如何在不完全更改代码的情况下实现滚动条。 public static void main(String args[]) throws IO
flutter - 滚动 PageView
我想使用带有垂直轴的 PageView 并使用鼠标滚动在页面之间移动，但是当我使用鼠标滚动时页面不滚动...仅页面单击并向上/向下滑动时滚动。有什么办法吗？我想保留属性 pageSnapping:
java - 滚动()和添加()
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
jquery - 滚动/跟随侧边栏帮助
使用 jquery 技术从 css-tricks.com 获得滚动/跟随侧边栏，如果您不知道我在说什么，这里是代码: $(function() { var $sidebar = $
Jquery-手机滑动菜单面板+滚动
我是 jQuery Mobile 新手。我需要向我的应用程序添加 Facebook 滑动面板功能。我经历了 sliding menu panel ，它工作正常，但我在菜单面板中的内容超出了窗口大小，
javascript - 如何在js或jQuery中检测ctrl +滚动？
有没有办法在 js 或 jQuery 或任何其他工具中检测 ctrl + 滚动。我正在尝试执行一些动态布局代码，我需要检测不同分辨率下的屏幕宽度，我通过使用 setTimeout() 的计时器实现了这
jquery 滚动 + 可拖动项目
我有一部分html代码:
c# - 滚动 RichTextBox
我想控制 RichTextBox 滚动，但在控件中找不到任何方法来执行此操作。这样做的原因是我希望当鼠标光标位于 RichTextBox 控件上时鼠标滚轮滚动有效(它没有事件焦点:鼠标滚轮事件由表单

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 在移动设备上 Bootstrap 侧滚动