Question

我在下面的评论中将其链接到JSFiddler。您将能够看到我设法让移动页脚正常工作，但是设备的CSS大于移动设备我想要的CSS并不起作用。

我已经在版权文字上留下了一个左推，并在社交图标上放了一个右拉，但是右拉似乎没有效果，不知道为什么。此外，我希望版权文本垂直居中。我试过使用vertical-align：middle;但它没有奏效。

<footer>
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-6 pull left">
                    <p class="copyright text-muted">Copyright &copy; Eat Sleep Kayak 2015</p>
                </div>
                <div class="col-xs-12 col-sm-6 pull-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>

@media (max-width:768px){
    footer {text-align: center; padding: 10px;}
}

footer {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: #eee;
  padding-top: 5px;
}
footer .list-inline {
  margin: 0;
  padding: 0;
}
footer .copyright {
  font-size: 14px;
  margin-bottom: 0;
  vertical-align: middle;
  padding-bottom: 10px;
}

Answer 1

pull-left和pull-right附加了错误的元素！

将这些类附加到p（pull-left）<p class="copyright text-muted pull-left">和u <ul class="list-inline pull-right">元素。那些是你想要拉的元素！

Answer 2

而不是vertical-align：middle try：

.example {
    margin-top: 50%;
    margin-bottom: 50%;
}

Answer 3

希望它解决了这个问题：）

.soc-sect{
    margin-top: 0px;
}

CSS引导自定义页脚问题

3 个答案: