Question

已更新：在下方添加了Bootstrap3代码。

从包含粘性页脚的默认bootstrap example开始。我尝试了在SO中找到的一些CSS方法，将DIV中心放在page的中间，垂直和水平。

但是，这些方法中的每一种都会更改粘性页脚，因为它不喜欢html, body { height: 100% }标记。

如果有人找到解决方案，我很好奇。

＆＃13;

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.jumbotron {
  width: 400px;
  float: none;
  margin-top: 100px;
  }

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

   <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <!-- Begin page content -->
    <div class="container">
      <center>
      <div class="jumbotron">
        Requires CSS coding to center it, height is fluid.
     </div>
     </center>
    </div><!-- /jumbotron -->

    <footer class="footer">
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>

＆＃13;

Answer 1

将文字放在页脚中心：

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #f5f5f5;
    text-align: center;
}

并在<p>标记中添加一些填充：

.text-muted {
    padding-top: 20px;
}

中心bootstrap 3与粘性页脚

1 个答案: