Question

我正在学习bootstrap。这时，我正在尝试在页面中添加页脚。我需要我的页脚看起来像这样：

+-----------------------------------------------------------------+
| Hello               Thank you for visiting               [logo] |
+-----------------------------------------------------------------+

基本上，这个想法是有三个部分。第一个中的内容是左对齐的。第二个内容集中在一起。最后，第三个内容是右对齐的。为了做到这一点，我做了以下几点：

<nav class="navbar navbar-static-top navbar-dark bg-inverse">
  <span class="navbar-brand">Hello</span>
  <span class="center-block"><span class="center-text">Thank you for visiting</span></span>
  <span class="pull-right"><div class="pull-right">[logo]</div></span>                  
</nav>

不幸的是，这不起作用。内容不会出现在同一行（它的所有锯齿状，我希望它是垂直居中的）。此外，“谢谢您的访问”不在中心。这是合理的。

我不确定我做错了什么。

Answer 1

我不确定您使用nav的原因，但此解决方案可能对您有用：

<div class="container">
    <div class="row">
        <div class="col-sm-4 text-left">
            <p>Hello</p>
        </div>
        <div class="col-sm-4 text-center">
            <p>Thank you for visiting</p>
        </div>
        <div class="col-sm-4 text-right">
            <p>[logo]</p>
        </div>
    </div>
</div>

Answer 2

您好使用此代码这完美无缺。确保添加了bootstrap js和css文件。

    <footer class="navbar navbar-static-bottom navbar-default">
              <div class="container" style="width">
                <div class="navbar-header">
                  <div class="navbar-brand" style="padding-left:0px; !important;color:#555 !important;">
                    Hello
                  </div>
                </div>
                <div class="navbar-header">
                  <div class="navbar-brand" style="position:absolute;text-align:center;width:1000px;">
                    Welcome to my website
                  </div>
                </div>
                   <div class="navbar-header navbar-right">
                  <div class="navbar-brand">
                    Logo goes here
                  </div>
                </div>
              </div>
            </footer>

享受....！

对齐页脚内容

2 个答案: