导航栏填充页面失败?

时间:2018-10-02 08:50:17

标签: html css margin fill margins

HTML:

<footer>
  <nav class="navbar navbar-inverse navbar-static-top" bottom="0" role="navigation">
    <div class="container">
      <ul class="nav navbar-nav">
        <li><a href="#">Apple Music</a></li>
        <li><a href="#">Spotify</a></li>
        <li><a href="#">Shazam</a></li>
        <li><a href="#">SoundCloud</a></li>
        <li><a href="#">© 2018 GetMedia. All rights reserved.</a></li>
      </ul>
    </div>
  </nav>
</footer>

我不知道bottom="0"到底是怎么不让底部导航栏进入底部来填充页面的。我有办法解决这个问题吗?

1 个答案:

答案 0 :(得分:0)

您必须使用CSS。如果您希望导航位于页脚的底部,则可以使用以下方法:

footer {
  display:flex;
}
nav {
  align-self: flex-end;
  flex-grow: 1; //to be on 100% width of footer
}

我还看到您有“ navbar-static-top”类,这可能会导致顶部定位。