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

Question

我还是 Bootstrap 的新手。如果我在 960 容器内进行设计，并且希望页脚正确地放入内部并粘在底部，我该如何编写代码？我发现的所有内容仅适用于在整个视图中运行页脚/导航。我已经尝试过 github 示例，甚至我的同学也不知道如何解决这个问题。

Answer 1

在 bootstrap.css 参考下面添加这个 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;在.containerCSS 代码中设置