Bootply example

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

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

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

Answer 2

无需更改HTML，只需添加以下CSS即可覆盖Bootstrap的默认值：

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

Bootply example

Answer 3

使用text-align:center;将负责将文本集中在其容器内。对于页脚，您应该在<footer>标记周围放置一个div或任何其他容器，并使用“容器”类来居中页脚。或者，只需将类container提供给页脚标记，即

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

这取决于您的布局和样式要求！

以引导脚注为中心

3 个答案:

Bootply example