html - CSS 的 Bootstrap 自定义页脚问题

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"> -元素。这些就是您要提取的元素!