如何在Bootstrap中制作960粘性页脚？

我还是Bootstrap的新手。如果我在960容器内进行设计，并希望页脚正确安装并粘贴到底部，我该如何编码？我发现的所有内容仅适用于在整个视图中运行页脚/导航栏。我试过github的例子，甚至连我的同学都不知道如何解决这个问题。如何在Bootstrap中制作960粘性页脚？

来源

2013-04-25 JannaK

对不起，如果它似乎是基本的每个人。我还在学习。 – JannaK 2013-04-25 04:57:09

http://jsfiddle.net/sZrbK/ – JannaK 2013-04-25 05:14:47

欢迎使用@JannaK到StackOverflow。你的问题是要求本地化情况的代码。尽量做你想做的事情，如果你有问题，那么在这里用一些代码问一个问题，并描述它有什么问题。 – Pigueiras 2013-04-25 06:40:56

添加这个CSS下面bootstrap.css参考：

<!-- CSS --> 
    <style type="text/css"> 

     /* Sticky footer styles 
     -------------------------------------------------- */ 

     html, 
     body { 
     height: 100%; 
     /* The html and body elements cannot have any padding or margin. */ 
     } 

     /* Wrapper for page content to push down footer */ 
     #wrap { 
     min-height: 100%; 
     height: auto !important; 
     height: 100%; 
     /* Negative indent footer by it's height */ 
     margin: 0 auto -60px; 
     } 

     /* Set the fixed height of the footer here */ 
     #push, 
     #footer { 
     height: 60px; 
     } 
     #footer { 
     background-color: #f5f5f5; 
     } 

     /* Lastly, apply responsive CSS fixes as necessary */ 
     @media (max-width: 767px) { 
     #footer { 
      margin-left: -20px; 
      margin-right: -20px; 
      padding-left: 20px; 
      padding-right: 20px; 
     } 
     } 



     /* Custom page CSS 
     -------------------------------------------------- */ 
     /* Not required for template or sticky footer method. */ 

     .container { 
     width: auto; 
     max-width: 960px; 

     } 
     .container .credit { 
     margin: 20px 0; 
     } 

    </style>

然后你就可以渲染页脚如下：

<div id="footer"> 
     <div class="container"> 
     <p class="muted credit">Example </p> 
     </div> 
    </div>

注：如果您遇到问题，尝试设置max-width: 680px;在.container在CSS代码

来源

2013-04-25 13:49:29 equisde

如何在Bootstrap中制作960粘性页脚？

回答

相关问题