我正在研究wordpress 4 bootstrap主题，我试图在自定义wordpress主题footer.php文件中找出社交图标（字体真棒）的页脚对齐方式。
在bootstrap测试页面中，页脚使用社交图标在行的上方和下方填充。
它使用这个类：“footer class =”section section-primary“
以下是bootstrap中的完整页面：
<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&fm=jpg&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）中，当使用bootstrap页脚类（“footer class =”section section-primary“）时，我的页脚没有粘到页面底部时出现问题，它确实正确对齐上面的引导代码。
为了让粘性页脚在我的wordpress主题中工作，我不得不使用“footer”这个类，我用css＆amp;让我的页脚坚持到底部：
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>© <?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中，字体很棒的行就在底部。我喜欢他们在他们下面有一些填充，就像在第一个bootstrap唯一的例子。
我尝试将wordpress主题footer.php页脚类从“footer”更改为“section section-primary”，这样可以解决我的粘性页脚。
感谢您的帮助。
答案 0 :(得分：0)
您可以尝试将<footer></footer>放在<body></body>并在您的CSS文件的最顶部调用margin:0;。
这会首先删除所有边距，但是当您添加边距让我们说出您的页脚或任何其他元素时会被覆盖。
希望这有帮助！