如何將頁腳內容居中以容納移動設備查看

當我的媒體查詢被調用時，我有一個有趣的問題，即獲取頁腳區域內的內容，堆棧在頁腳中心。雖然我可以在移動視圖測試處於橫向方向時調整位置，但當我切換到縱向時，一切都關閉。無論以哪種方式在設備上查看頁腳部分（橫向或縱向），我都會前後對戰以使內容居中。這是我對一般的頁腳代碼片段：如何將頁腳內容居中以容納移動設備查看

<!-- FOOTER BEGINS HERE --> 
<div id="footer" class="bottom-menu bottom-menu-inverse" style="background-color: #6e6e6e; margin-top: 45px;"> 
    <div class="container"> 
     <div class="row"> 

      <div class="col-md-2 navbar-brand" style="padding: 0; margin-top: 45px;"> 
       <a href="#" style="font-family: 'Edwardian Script ITC'; font-size:25px">Young Exekutive</a> 
      </div> 

      <div class="col-md-4" style="width:443px;"> 
       <ul class="bottom-links"> 
        <li><a href="#" onmousedown="resetScroller('home');">home</a></li> 
        <li><a href="#" onmousedown="resetScroller('about');">about</a></li> 
        <li><a href="quotes.html">+quotes</a></li> 
        <li><a href="gallery.html">gallery</a></li> 
        <li><a href="/YoungMedia/videos.html">videos</a></li> 
        <li><a href="shop.html">shop</a></li>      
        <li><a href="#" onmousedown="resetScroller('links');">links</a></li> 
        <li><a href="#" onmousedown="resetScroller('contact');">contact</a></li> 
       </ul> 
      </div> 

      <div class="col-md-2" style="width:375px;"> 
       <ul class="bottom-icons" style="list-style: none">  
        <li><a target="_blank" href="https://facebook.com/" class="fa fa-facebook-square"></a></li> 
        <li><a target="_blank" href="https://twitter.com/" class="fa fa-twitter"></a></li>       
        <li><a target="_blank" href="https://linkedin.com/" class="fa fa-linkedin-square"></a></li> 
        <li><a target="_blank" href="https://instagram.com/" class="fa fa-instagram"></a></li> 
        <li><a target="_blank" href="https://pinterest.com/" class="fa fa-pinterest-square"></a></li> 
       </ul> 
       </div> 

      </div> 
     </div> 
    </div>

下面是在我的CSS媒體查詢匹配的部分：

/* For Landscape Orientation */ 

@media(max-width: 768px) {  
#footer { 
    overflow: hidden; 
    width: 100%; 
    max-height:100%;   
    text-align: center; 
} 

ul li a { 
    margin: -50px;   
} 

div.col-md-2.navbar-brand { 
    font-size: small; 
    bottom: 30px; 
}  
} 

/* For Portrait Orientation */ 

@media(max-width: 480px) { 
#footer { 
    overflow: hidden; 
    width: 100%; 
    max-height:100%; 
} 

ul li a { 
    margin: 150px; 
    font-size: small; 
} 

div.col-md-2.navbar-brand { 
    padding: 0; 
    font-size: small; 
    bottom: 20px; 
    margin-left: 75px; 
} 
}

桌面瀏覽器的頁腳是好的，但看到我的圖片上傳的移動使用ResponiView插件Chrome瀏覽器是如何變成了，用不同的設備：

enter image description here

我缺少的是與否d在這裏的人？我玩過CSS類和屬性，但找不到解決方案。我知道這些鏈接/元素可以疊加，但我無法完成。

來源

2015-01-12 Jo' vani7

請與這個CSS

@media screen and (max-width: 768px) {  
#footer { 
    overflow: hidden; 
    width: 100%; 
    max-height:100%;   
    text-align: center; 
} 

ul li a { 
    margin: -50px;   
} 

div.col-md-2.navbar-brand { 
    font-size: small; 
    bottom: 30px; 
} 
     .col-md-4 { 
     width:100% !important} 

     #footer li { 
     list-style:none} 
     ul, li { 
     margin:0 ; padding:0} 
     div.col-md-2.navbar-brand { 
    bottom: 20px; 
    font-size: small; 
    margin-left: 0 !important; 
    padding: 0;margin-top: 2px !important; 
} 

ul li a { 
    font-size: small; 
    margin: 5px 0 !important; 
} 
     #footer { 
     padding-bottom:10px;} 
} 


@media screen and (max-width: 480px) { 
#footer { 
    overflow: hidden; 
    width: 100%; 
    max-height:100%; 
}

}

替換此

來源

2015-01-12 09:11:28 anji

如何將頁腳內容居中以容納移動設備查看

回答

相關問題