2015-12-30 163 views
0

我正在嘗試創建一個響應式網站。在移動視圖中,除了頁腳外,其他內容都看起來不錯,但內容看起來並不完美。 這裏有截圖。HTML頁腳響應未完全對齊

這是桌面視圖

enter image description here

這是移動視圖

enter image description here

正如你所看到的一切都搞砸了。這裏是我的代碼

<div id="footer" class="navbar navbar-default navbar-fixed-bottom"> 
      <div class="container-fluid"> 
       <div class="navbar-text pull-left"> 
        <p id="color"> Supported By </p> 
       </div> 
       <div class="navbar-text pull-left"> 
        <a href="http://www.kafd.jo/" target="_blank"><img class="img-responsive" src="Images/King-Abdullah-Fund-Development-Jordan-360-Panorma-Video.png" id="imageclass1"></a> 
       </div> 
       <div class="navbar-text pull-left"> 
        <a href="http://visitjordan.com/" target="_blank"><img class="img-responsive" src="Images/Jordan-Tourism-Board-Visit-Jordan-Lolo.png" id="imageclass1"></a> 
       </div> 

       <div class="navbar-text" id="centered"> 
        <a href="http://www.360mea.com/request-a-recording/" target="_blank"><img class="img-responsive" src="Images/Request-a-Recording-Jordan-360-Panorama.png" id="imagecenter"></a> 
       </div> 

       <div class="navbar-text pull-right"> 
        <a href="http://www.oasis500.com/" target="_blank"><img class="img-responsive" src="Images/Oasis-500-logo-360.png" id="imageclass"></a> 
       </div> 
       <div class="navbar-text pull-right"> 
        <a href="http://www.ayla.com.jo/" target="_blank"><img class="img-responsive" src="Images/Ayla-Logo.png" id="imageclass1"></a> 
       </div> 
       <div class="navbar-text pull-right"> 
        <a href="http://www.manaseergroup.com/" target="_blank"><img class="img-responsive" src="Images/Manaser.png" id="imageclass2"></a> 
       </div> 
       <div class="navbar-text pull-right"> 
        <p id="color">Partners</p> 
       </div> 
      </div> 
     </div> 

而對於CSS

#centered { 
    position: absolute; 
    overflow: visible; 
    left: 40%; 
} 
#imagecenter{ 
    max-width: 200px; 
    max-height: 200px; 
} 
#imageclass1{ 
    max-width: 90px; 
    max-height: 90px; 
} 
#imageclass2{ 
    max-width: 70px; 
    max-height: 60px; 
} 

這是我的移動視圖

@media screen and (min-width: 400px) { 
    body { 
     overflow: auto; 
    } 
    .img-responsive { 
     position:relative; 
     max-width: 20%; 
    } 
    #color{ 
     font-size: 5px; 
    } 
    #footer{ 
     max-height: 200px; 
    } 
} 

如果有比我的方式比較簡單的方法嘗試,我會非常感謝。 謝謝!

回答

0

忘記每個元素的左拉右,並使用col的佈局(col偏移將有助於居中的一個)。

0

Bootstrap爲設計響應式網站提供了簡單的方法。您只需將類添加到您的div,引導程序的css將完成這項工作!你可以在這裏找到它: http://getbootstrap.com/