Question

当我的媒体查询被调用时，我有一个有趣的问题，即在我的页脚区域内获取内容，堆叠在页脚的中心。虽然我可以在移动视图测试处于横向方向时调整定位，但当我切换到纵向时，一切都已关闭。无论来自设备上的页脚部分（横向或纵向）的哪种方式，我都会前后争吵使内容居中。这是我的页脚的代码片段：

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

桌面浏览器的页脚很好，但是使用针对Chrome的ResponiView插件，使用不同的设备查看我的图片上传了移动设备的结果：

enter image description here

我错过了什么或者没有在这里做什么人？我使用过CSS类和属性，但无法找到解决方案。我知道这些链接/元素可以叠加，但我无法实现。

Answer 1

请用此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%;
}

}

如何将页脚内容居中以适应移动查看

1 个答案: