如何使单排页脚响应

我在页脚中的内容非常少，并且它在单行中。有一件事我试图实现如何使单排页脚响应

当我去的移动视图说范围从320像素到480像素，社交媒体图标和文本重叠我希望他们在两行，当没有地方，以适应单行。平板电脑屏幕也是如此。

这里是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>

来源

2016-05-30 Sudarshan Kalebere

请不要在一个问题中指出一个以上的问题。问个别问题。用于解决您的第一个问题的技术称为*粘性页脚*互联网上有许多实现。 –

@TJ粘性页脚在position：absolute; bottom：0上工作，父元素必须具有position：relative，在我的情况下，它之间有一些内容，它们之间已经有相对位置了。当内容不粘时，粘性页脚总是粘在底部。所以我已经尝试过，它在我的情况下不起作用 –

*“还有粘性页脚始终粘在底部，当有内容时”* - 不，这不是所谓的粘性页脚。 *“粘性页脚在位置上工作：绝对;底部：0，”* - 再次否，就像我说的那样，有很多实现方式和许多方法来实现它。 –

刚刚更新如下你的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>

来源

2016-05-30 11:58:15

您正在使用的引导，这使得这个非常容易解决。您不需要在页脚元素上添加任何额外的位置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负责其余的部分。

来源

2016-05-30 12:29:28 Dominofoe

如何使单排页脚响应

回答

相关问题