居中引导页脚

Question

我试图将引导页脚居中在我的页面上，并遇到问题。现在，它默认保持对齐状态，我似乎无法在上周多次尝试后找到解决方法 - 我很难过。这是我迄今为止的代码...

感谢您的帮助！

<footer> 
    <div class="navbar navbar-inverse navbar-fixed-bottom"> 
    <div class="container"> 
     <div class="navbar-collapse collapse" id="footer"> 
     <ul class="nav navbar-nav"> 
      <li><a href="about.php">about</a></li> 
      <li><a href="faq.php">faq</a></li> 
      <li><a href="contact_feedback.php">contact us</a></li> 
      <li><a href="contributions.php">donate</a></li> 
      <li><a href="terms_of_use.php">terms of use</a></li> 
      <li><a href="privacy_policy.php">privacy policy</a></li> 
     </ul> 
     </div> 

     <div class="navbar-footer"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#footer"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     </div> 
    </div> 
    </div> 
</footer> 

Answer 1

无需改变你的HTML，只需添加以下CSS覆盖引导的默认值：

.navbar-nav { 
    text-align:center; 
    float:none; 
} 
    .navbar-nav li { 
     display:inline-block; 
     float:none; 
    } 

Bootply example

Answer 2

你能把你的页脚放在一行吗？然后你可以把它放在中间一栏。

<div class="row"> 
<div class="col-md-2"> 
</div> 
<div class="col-md-8"> 
--- Your footer --- 
</div> 
<div class="col-md-2"> 
</div> 

Answer 3

使用text-align:center;将负责将集装箱内的文字居中。至于页脚，您应该在<footer>标签周围放置一个div或任何其他容器，使用“容器”类将页脚居中。或者只是给类container到您的页脚的标签即

<footer class="container"> 
    <!-- footer content etc --> 
</footer> 

这取决于你的布局和风格的要求！