嵌入在手機視圖上的對象非常混亂

我從我繼承的網站下面有page。一切都很好，當我嘗試不同的窗口大小，但如果我切換到移動視圖在Chrome divs開始漂浮在頁面頂部。嵌入在手機視圖上的對象非常混亂

我只是不明白是什麼讓這發生。

{% load staticfiles %} 
<!doctype html> 
    <head> 
     <meta charset="utf-8"> 
     <title>www</title> 
     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width"> 
     <link rel="shortcut icon" href="static/favicon.ico"> 
     <link rel="stylesheet" href="/static/bower_components/bootstrap/dist/css/bootstrap.css"> 
     <link rel="stylesheet" href="/static/StudioHanel/styles/main.css"> 
     <!-- endbuild --> 
     <!-- build:js scripts/vendor/modernizr.js --> 
     <script src="{% static "bower_components/modernizr/modernizr.js" %}"></script> 
     <!-- endbuild --> 

    </head> 
    <body onLoad="studioHanel.StudioHanel()"> 
     <!--[if lt IE 10]> 
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
     <![endif]--> 

     <div class="navbar-fixed-top"> 
      <img class="logo" src="{% static "images/logo_large.png" %}" alt="Studio Hanel"/> 
      <ul id="menu" class="nav nav-pills pull-right"></ul> 
     </div> 

     <div id="landing"> 
     </div> 

     <div id="teaser-about" class="teaser"> 
      <h1></h1> 
      <div class="arrow"></div> 
     </div> 

     <div id="about"> 
      <div class="container-fluid"> 

      <div class="header"></div> 
      <h1></h1> 
      <div class="container"> 
       <div class="row"> 
        <div id="about-copy-column" class="col-md-8"><div class="two-columns"></div></div> 
        <div id="about-photo-column" class="col-md-4"><img src="{% static "images/cordelia_old.png" %}" width="244" height="274"></div> 
       </div> 
      </div> 

      </div> 
     </div> 

     <div id="interiors"> 
      <div class="container-fluid"></div> 
     </div> 

     <div id="teaser-interiors" class="teaser"> 
      <div class="shadow-up"></div> 
      <div class="pattern"></div> 
      <h2></h2> 
      <div class="shadow-down"></div> 
      <div class="arrow"></div> 
     </div> 

     <div id="case-study"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div id="cell1" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div> 
        <div id="cell2" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div> 
       </div> 
       <div class="row">  
        <div id="cell3" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div> 
        <div id="cell4" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div> 
       </div> 
       <div class="row">  
        <div id="cell5" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div> 
        <div id="cell6" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div> 
       </div> 
      </div> 
     </div> 

     <div id="product-design"> 

     </div> 

     <div id="teaser-contact" class="teaser"> 
      <h2></h2> 
      <div class="arrow"></div> 
     </div> 

     <div id="contact-util"></div> 

     <div id="contact"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-md-7" id="contact-form"> 
         <form name="contact" action="" method=""> 
          <fieldset> 
           <input id="name" class="text-input" type="text" name="name" placeholder="Your name"> 
           <input id="email" class="text-input" type="text" name="sender" placeholder="Your email"> 
           <input id="message" class="text-input" type="text" name="message" placeholder="What's on your mind?"> 
           <label id="error"></label> 
           <input id="send" class="button" type="button" value="Send"> 
           <!--<input id="send" class="button" name="submit" value="Send">--> 
          </fieldset> 
         </form> 
        </div> 
        <div class="col-md-4"> 
         <div id="contact-details"> 
          <div id="phone" class="contact-details"></div> 
          <div id="address" class="contact-details"></div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="shadow-up"></div> 
      <div class="pattern"></div> 
     </div> 

     <div id="copyright"> 
      <p>&copy; Studio Hanel 2014 All rights reserved including all imagery as shown on this website</p> 
     </div> 

     <!-- build:js scripts/vendor.js --> 
     <!-- bower:js --> 
     <script src="{% static "bower_components/jquery/dist/jquery.js" %}"></script> 
     <!-- <script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap.js" %}"></script> --> 
     <script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap.js" %}"></script> 
     <!-- <script src="{% static "bower_components/greensock/src/uncompressed/TweenMax.js" %}"></script> --> 
     <script src="{% static "bower_components/gsap/src/uncompressed/TweenMax.js" %}"></script> 

     <!-- <script src="{% static "bower_components/greensock/src/uncompressed/plugins/ScrollToPlugin.js" %}"></script> --> 
     <script src="{% static "bower_components/gsap/src/uncompressed/plugins/ScrollToPlugin.js" %}"></script> 
     <!-- <script src="{% static "bower_components/modernizr/feature-detects/css/scrollbars.js" %}"></script> --> 
     <!-- endbower --> 
     <!-- endbuild --> 

     <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> 
     <script> 
      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= 
      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; 
      e=o.createElement(i);r=o.getElementsByTagName(i)[0]; 
      e.src='//www.google-analytics.com/analytics.js'; 
      r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); 
      ga('create','UA-XXXXX-X');ga('send','pageview'); 
     </script> 
<!-- 
     <script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/affix.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/alert.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/dropdown.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tooltip.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/modal.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/transition.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/button.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/popover.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/carousel.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/scrollspy.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/collapse.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tab.js" %}"></script> --> 

     <!-- build:js scripts/plugins.js --> 
     <script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/affix.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/alert.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/modal.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/transition.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/button.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/carousel.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/scrollspy.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/collapse.js" %}"></script> 
     <script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/tab.js" %}"></script> 
     <!-- endbuild --> 

     <!-- build:js({app,.tmp}) scripts/main.js --> 
     <script src="{% static "scripts/utils.js" %}"></script> 
     <script src="{% static "scripts/landing.js" %}"></script> 
     <script src="{% static "scripts/about.js" %}"></script> 
     <script src="{% static "scripts/interiors.js" %}"></script> 
     <script src="{% static "scripts/case_study.js" %}"></script> 
     <script src="{% static "scripts/product_design.js" %}"></script> 
     <script src="{% static "scripts/contact.js" %}"></script> 
     <script src="{% static "scripts/menu.js" %}"></script> 
     <script src="{% static "scripts/navigation.js" %}"></script> 
     <script src="{% static "scripts/main.js" %}"></script> 
     <!-- endbuild --> 
</body> 
</html>

的main.css 不能公佈，由於大尺寸。

可以從here

來源

2016-11-21 Mike IT

安置自己的CSS代碼 – Kiogara

感謝迴應....不幸的是它的方式大，你可以從這裏下載http://vps100011.vps.ovh.ca/static/StudioHanel/styles/main.css –

抱歉，沒有看到bootstrap負責響應。您可以通過將徽標圖像放入其他div並隱藏小屏幕來修復重疊。 – Kiogara

下載的問題似乎是標誌和導航欄重疊。

爲了解決這個問題，你可以用一個div包裝標識和使用引導程序的類hidden-xs這樣的：

<div class="navbar-fixed-top"> 
    <div class="hidden-xs"> 
     <img class="logo" src="{% static "images/logo_large.png" %}" alt="Studio Hanel"/> 
    </div> 
    <ul id="menu" class="nav nav-pills pull-right"></ul> 
</div>

來源

2016-11-21 19:28:47 Kiogara

沒有多大幫助。但是，謝謝，我只是不明白爲什麼當我向下滾動時，「歡迎屏幕」部分的寬度從半寬變爲全角。而且只有當我切換到移動視圖時纔會發生，即使屏幕寬度很小。 –

Firefox沒有打破，似乎是在面板上的'position：absolute'css屬性的東西 – Kiogara

不，我正在使用Chrome移動設備（例如Galaxy S5）......就像我說過的事情很好，如果我縮小/收緊瀏覽器寬度。作爲另一個例子，有一個div＃landing，其寬度= 100％，但它不能填充設備的整個寬度。 –

嵌入在手機視圖上的對象非常混亂

回答

相關問題