【问题标题】:Boostrap4: Dashboard with fixed Top-Nav and fixed footerBootstrap 4:带有固定顶部导航和固定页脚的仪表板
【发布时间】:2020-06-18 16:14:21
【问题描述】:

我正在寻找带有 bootstrap 4 的仪表板布局。 基于https://getbootstrap.com/docs/4.0/examples/dashboard/,仪表板已经可以正常工作了。 但结合https://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/ 似乎不起作用。 最后布局应该是这样的:

+----------------------------------------------------------------------+
|       Nav (fixed, sticky)                                            |
+----------------------------------------------------------------------+
|            |                                                         |
|            |                                                         |
|  Sidebar   |               Main (scrollable)                         |
|(scrollable)|                                                         |
|            |                                                         |
|            |                                                         |
|            |                                                         |
|            |                                                         |
|            |                                                         |
|            |                                                         |
|            |                                                         |
|            |                                                         |
|            |                                                         |
+----------------------------------------------------------------------+
|       Footer (fixed, sticky)                                         |
+----------------------------------------------------------------------+

这可能吗? 有什么例子可以工作吗? 非常感谢。

【问题讨论】:

标签: html css bootstrap-4


【解决方案1】:

在导航栏添加navbar-fixed-top 并在页脚添加:

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

【讨论】:

    【解决方案2】:

    Footer 放在</main> 标记之前。

        <footer class="footer" style="text-align: center;">
          <div class="container">
            <span class="text-muted">Place sticky footer content here.</span>
          </div>
        </footer>
      </main>
    

    【讨论】:

      猜你喜欢
      • 2018-09-13
      • 2019-07-29
      • 1970-01-01
      • 2017-07-14
      • 2018-12-12
      • 1970-01-01
      • 1970-01-01
      • 2017-12-09
      • 2018-10-03
      相关资源
      最近更新 更多