Question

我无法为我的页脚获得正确的样式。我设法为移动设备设置了正确的样式，但对于平板电脑和桌面设备，我遇到了一些问题。我试图让社交图标水平居中到页脚的右侧。我不确定为什么有当前的设置位置。任何帮助解决这个问题都会有所帮助。

此图显示了我尝试为桌面版创建的内容。我不确定如何使用固定的保证金位置，这不是我想要做的，因为它只适用于Chrome，然后在其他浏览器中看起来很糟糕？

     <footer>
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-6">
                    <p class="copyright text-muted">Copyright &copy; Eat Sleep Kayak 2015</p>
                </div>
                <div class="footersocialicons col-xs-12 col-sm-6">
                    <ul class="list-inline">
                        <li>
                            <a href="#">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-google fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>    

/* Footer */
    @media (max-width:768px){
        footer {text-align: center; padding: 5px;}
    }

    @media (min-width: 769px) {
        footer .list-inline {
          float: right;
          position:relative;top:50% ; 
          transform:translateY(-50%);
        }
        footer .copyright {
          float: left;
        }
    }

    footer {
      font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      /*background-color: #eee;*/
      background-color: #6B6A67;
      padding-top: 5px;
    }

    footer .copyright {
      font-size: 14px;
    }

    footer .list-inline {
      height: 100%;
    }

Answer 1

将班级.text-center添加到此行 - <div class="footersocialicons col-xs-12 col-sm-6">，以便将所有内容集中在其中。

Answer 2

尝试在页脚中添加固定高度和line-height。你还说你想要右边的图标，所以你要添加.text-right类来做到这一点。

以下将页脚文本和图标水平居中，并将图标对齐。

<style>
    footer {
        height: 60px;
        line-height: 60px;
    }
</style>


 <footer>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <p class="copyright text-muted">Copyright &copy; Eat Sleep Kayak 2015</p>
            </div>
            <div class="footersocialicons col-xs-12 col-sm-6 text-right">
                <ul class="list-inline">
                    <li>
                        <a href="#">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-google fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</footer>

小提琴：http://jsfiddle.net/timgavin/mas4dg0y/

Bootstrap CSS页脚自定义问题

2 个答案: