Bootstrap 3 Sticky Footer（Wordpress 主题）响应式答案

【问题标题】：Bootstrap 3 Sticky Footer (Wordpress Theme) ResponsiveBootstrap 3 Sticky Footer（Wordpress 主题）响应式
【发布时间】：2016-01-16 17:38:25
【问题描述】：

我正在开发一个 wordpress 4 bootstrap 主题，并试图在我的自定义 wordpress 主题 footer.php 文件中找出社交图标（字体真棒）的页脚对齐方式。

在引导测试页面中，页脚与带有社交图标的行上方和下方的填充一起使用。

它使用这个类：“footer class="section section-primary"

这是在引导程序中工作的完整页面：

<html>
  
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"
    rel="stylesheet" type="text/css">
    <link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css"
    rel="stylesheet" type="text/css">
  </head>
  
  <body>
    <div class="cover">
      <div class="navbar">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><span>Brand</span></a>
          </div>
          <div class="collapse navbar-collapse" id="navbar-ex-collapse">
            <ul class="nav navbar-nav navbar-right">
              <li class="active">
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Contacts</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="cover-image" style="background-image: url(https://unsplash.imgix.net/photo-1418065460487-3e41a6c84dc5?q=25&amp;fm=jpg&amp;s=127f3a3ccf4356b7f79594e05f6c840e);"></div>
      <div class="container">
        <div class="row">
          <div class="col-md-12 text-center">
            <h1 class="text-inverse">Heading</h1>
            <p class="text-inverse">Lorem ipsum dolor sit amet, consectetur adipisici eli.</p>
            <br>
            <br>
            <a class="btn btn-lg btn-primary">Click me</a>
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png"
            class="img-responsive">
          </div>
          <div class="col-md-6">
            <h1 class="text-primary">A title</h1>
            <h3>A subtitle</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
              ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
              dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies
              nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
              Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In
              enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum
              felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
              elementum semper nisi.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <h1 class="text-primary">A title</h1>
            <h3>A subtitle</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
              ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
              dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies
              nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
              Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In
              enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum
              felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
              elementum semper nisi.</p>
          </div>
          <div class="col-md-6">
            <img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png"
            class="img-responsive">
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h1 class="text-center text-primary">Team</h1>
            <p class="text-center">We are a group of skilled individuals.</p>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <img src="http://pingendo.github.io/pingendo-bootstrap/assets/user_placeholder.png"
            class="center-block img-circle img-responsive">
            <h3 class="text-center">John Doe</h3>
            <p class="text-center">Developer</p>
          </div>
          <div class="col-md-4">
            <img src="http://pingendo.github.io/pingendo-bootstrap/assets/user_placeholder.png"
            class="center-block img-circle img-responsive">
            <h3 class="text-center">John Doe</h3>
            <p class="text-center">Developer</p>
          </div>
          <div class="col-md-4">
            <img src="http://pingendo.github.io/pingendo-bootstrap/assets/user_placeholder.png"
            class="center-block img-circle img-responsive">
            <h3 class="text-center">John Doe</h3>
            <p class="text-center">Developer</p>
          </div>
        </div>
      </div>
    </div>
    <footer class="section section-primary">
      <div class="container">
        <div class="row">
          <div class="col-sm-6">
            <h1>Footer header</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisici elit,
              <br>sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
              <br>Ut enim ad minim veniam, quis nostrud</p>
          </div>
          <div class="col-sm-6">
            <p class="text-info text-right">
              <br>
              <br>
            </p>
            <div class="row">
              <div class="col-md-12 hidden-lg hidden-md hidden-sm text-left">
                <a href="#"><i class="fa fa-3x fa-fw fa-instagram text-inverse"></i></a>
                <a href="#"><i class="fa fa-3x fa-fw fa-twitter text-inverse"></i></a>
                <a href="#"><i class="fa fa-3x fa-fw fa-facebook text-inverse"></i></a>
                <a href="#"><i class="fa fa-3x fa-fw fa-github text-inverse"></i></a>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 hidden-xs text-right">
                <a href="#"><i class="fa fa-3x fa-fw fa-instagram text-inverse"></i></a>
                <a href="#"><i class="fa fa-3x fa-fw fa-twitter text-inverse"></i></a>
                <a href="#"><i class="fa fa-3x fa-fw fa-facebook text-inverse"></i></a>
                <a href="#"><i class="fa fa-3x fa-fw fa-github text-inverse"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </body>

</html>

在我的 wordpress 主题 (footer.php) 中，当使用引导页脚类 ("footer class="section section-primary") 时，我遇到了页脚没有粘在页面底部的问题，它确实像在上面的引导代码。

为了让粘性页脚在我的 wordpress 主题中工作，我必须使用“页脚”类，并使用 css 和 js 执行以下操作以使页脚粘在底部：

var bumpIt = function() {
      $('body').css('margin-bottom', $('.footer').height());
    },
    didResize = false;

bumpIt();

$(window).resize(function() {
  didResize = true;
});

setInterval(function() {
  if(didResize) {
    didResize = false;
    bumpIt();
  }
}, 100);

body {
  /* Margin bottom by footer height */
  margin-bottom: 140px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: white;
  /* Set the fixed height of the footer here */
  /*height: 140px; */
  background-color: #313131;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>


       <!-- ========== FOOTER ========== -->
   <footer class="footer">
   <div class="section section-primary">
      <div class="container">
        <div class="row">
          <div class="col-sm-6">
            <h1>My Website</h1>
            <p>&copy; <?php bloginfo('name'); ?> <?php echo date('Y'); ?></p>
          </div>
          <div class="col-sm-6">
            <p class="text-info text-right">
              <br>
              <br>
            </p>
            <div class="row">
              <div class="col-md-12 hidden-lg hidden-md hidden-sm text-left">
                <a href="#"><i class="fa fa-3x fa-fw fa-instagram text-inverse"></i></a>
                <a href="#"><i class="fa fa-3x fa-fw fa-twitter text-inverse"></i></a>
                <a href="#"><i class="fa fa-3x fa-fw fa-facebook text-inverse"></i></a>
                <a href="#"><i class="fa fa-3x fa-fw fa-github text-inverse"></i></a>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 hidden-xs text-right">
                <a href="#"><i class="fa fa-3x fa-fw fa-instagram text-inverse"></i></a>
                <a href="#"><i class="fa fa-3x fa-fw fa-twitter text-inverse"></i></a>
                <a href="#"><i class="fa fa-3x fa-fw fa-facebook text-inverse"></i></a>
                <a href="#"><i class="fa fa-3x fa-fw fa-github text-inverse"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
    </footer>

<?php wp_footer(); ?>




</body>
</html>

在footer.php 中字体很棒的行就在底部。我希望它们下面有一些填充，就像在第一个仅引导示例中一样。

我尝试将 wordpress 主题 footer.php 页脚类从“footer”更改为“section section-primary”，这可行，但会破坏我的粘性页脚。

感谢您的帮助。

【问题讨论】：

使用“粘性页脚”是指它停留在页面上，对吗？还是我误会了？
我的意思是粘性页脚，页脚总是留在页面的最底部，下面没有空间，或者它总是粘在底部。谢谢
在某些主题页面上没有 .js 和 css，页脚下方有空间。

标签： jquery css wordpress twitter-bootstrap-3 wordpress-theming

【解决方案1】：

您可以尝试将<footer></footer> 放在<body></body> 中，然后在CSS 文件最顶部的body 上调用margin:0;。

这首先会删除所有边距，但当您添加边距时会被覆盖，例如您的页脚或任何其他元素。

希望这会有所帮助！

【讨论】：

谢谢，我不确定我是否在解释。我在我的 wordpress 主题中处理 footer.php。在引导程序中，只有 xs 屏幕上的页脚，页脚和社交图标看起来像 winterfall.eu/1.png 在我的 wordpress 主题 - footer.php 和我的 css 和 js 中，使页脚留在页面底部，社交图标在底部winterfall.eu/2.png & winterfall.eu/3.png
wordpress footer.php 正在使用与我的 js 和 css 一起使用的“footer”类。在引导程序中，只有页脚类“section section-primary”像我试图在 wordpress 主题中复制一样工作。