Question

页脚中的内容很少，单行。我想要实现一件事

当我去移动视图时，范围从320px到480px，社交媒体图标和文本重叠我想要它们在两行中没有适合单行的地方。平板电脑屏幕也是如此。

这是demoToEdit 这是我的示例代码

<div class='container'>
  <h1>hi this is heading</h1>
</div>
<div class="container-fluid footer-section">
            <footer class="footer">
                <div class="footer-section col-xs-12">
                    <p class="text-muted copyright-footer-text">Copyright 2016 © PurpleChilli. All rights reserved.</p>

                </div>
                <div class="pull-right social-media-section">
                        <a href=""><i class="fa fa-2x fa-google"></i></a>
                        <a href=""><i class="fa fa-2x fa-twitter"></i></a>
                        <a href=""><i class="fa fa-2x fa-instagram"></i></a>
                        <a href=""><i class="fa fa-2x fa-linkedin"></i></a>
                        <a href=""><i class="fa fa-2x fa-pinterest"></i></a>
                        <a href=""><i class="fa fa-2x fa-youtube"></i></a>
                        <a href=""><i class="fa fa-2x fa-facebook"></i></a>
                    </div>
            </footer>
        </div>

Answer 1

刚刚更新了CSS的部分内容，如下所示。

.social-media-section{
    position: absolute;
    top: 0;
    right: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: right;
}

@media (max-width:967px) {
  .social-media-section {
    float: left !important;
    right: auto;
    text-align: center;
    position: relative;
    padding: 0;
  }
}

HTML部分如下

<div class="pull-right social-media-section col-xs-12">
 .....
</div>

Answer 2

您正在使用bootstrap，这使得这很容易解决。页脚元素上不需要任何额外的位置css，只需根据引导程序正确构造HTML。

<div class="row">
  <div class="col-md-6">
    < Put left side content here >
  </div>
  <div class="col-md-6">
    < Put left side content here >
  </div>
</div>

将它放在你的页脚容器div中，bootstrap负责其余部分。

如何使单行页脚响应

2 个答案: