Question

我正在尝试创建一个响应式网站。除了页脚，在移动视图中内容似乎没有完美对齐，一切看起来都很棒。这是截图。

这是桌面视图

这是移动视图

你可以看到一切都搞砸了。这是我的代码

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

如果有一种比我做的更简单的方法，我会非常感激。谢谢！

Answer 1

Bootstrap提供了设计响应式网站的简便方法。你只需要为你的div和bootstrap添加类，css就可以完成这项工作！你可以在这里找到它： http://getbootstrap.com/

Answer 2

忘记每个元素上的左拉右拉，并使用col的布局（col偏移将对中心元素有帮助。）

HTML页脚响应不完美对齐

2 个答案: