将 Bootstrap 4 导航栏链接对齐到底部

沙尚克
I want bootstrap 4.1 navbar links to be vertically aligned to bottom of the navbar.  The links are currently aligned centered vertically. I have given height of 150px to navbar and given padding of 100px to the navbar-nav and I am able to get them at the bottom but its look distorts when the navbar collapses. Here is the fiddle :

https://jsfiddle.net/ctk60df7/1/

Please help me
齐姆

您将需要使用媒体查询,以便仅导航栏折叠为“移动”垂直模式之前应用 150 像素高度对于navbar-expand-lg,导航栏在 992px 处折叠,因此媒体查询将是:

@media (min-width:992px) {
  .navbar {
    height: 150px;
  }
}

然后用于align-items-end对齐底部的导航链接。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark align-items-end">
    <div class="container">
    </div>
</nav>

https://www.codeply.com/go/VyB9zsXLCJ

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将Bootstrap导航对齐中心

来自分类Dev

Bootstrap Glyphicons在底部导航栏上未垂直对齐

来自分类Dev

Twitter Bootstrap:将导航标签与div底部对齐

来自分类Dev

Bootstrap-导航栏中的底部对齐菜单

来自分类Dev

是否可以将Twitter Bootstrap导航栏的按钮左对齐?

来自分类Dev

Bootstrap 4:徽标增加导航栏高度时,垂直对齐导航链接

来自分类Dev

如何将纯文本添加到Bootstrap 4导航栏?

来自分类Dev

如何将bootstrap4导航栏转换为移动侧栏?

来自分类Dev

Bootstrap 4将图标与<a>标记对齐

来自分类Dev

Bootstrap 4:HTML-将Div与导航栏一起使用

来自分类Dev

Bootstrap 4-将导航栏项目向右对齐

来自分类Dev

Bootstrap 4-将div垂直对齐到列的底部

来自分类Dev

Bootstrap 4导航栏右对齐搜索选项以及注册

来自分类Dev

Bootstrap 4导航栏将内容下推

来自分类Dev

调整屏幕大小时,Bootstrap 4导航栏将显示自动堆叠的ml-auto项目

来自分类Dev

在Bootstrap中,如何将导航栏链接右对齐?

来自分类Dev

Bootstrap 4粘性底部导航栏-底部导航栏下方的主要内容滚动

来自分类Dev

bootstrap4在左侧对齐导航栏项目

来自分类Dev

如何将纯文本添加到Bootstrap 4导航栏?

来自分类Dev

尝试将导航链接与引导4中的徽标对齐

来自分类Dev

在Bootstrap 4中更正导航栏链接的垂直对齐

来自分类Dev

在bootstrap-4中将导航项与右侧对齐

来自分类Dev

如何将 div bootstrap 网格中的文本对齐到底部?

来自分类Dev

Bootstrap 4 Beta 2 - 导航栏:右对齐不折叠

来自分类Dev

导航栏中的 bootstrap 4 按钮对齐

来自分类Dev

将导航栏品牌和导航项目放在 Bootstrap 4 导航栏中的不同行

来自分类Dev

Bootstrap 4 Tab 链接从导航栏输出

来自分类Dev

使用行类将 div 拉伸到 Bootstrap 4 底部

来自分类Dev

如何将 Bootstrap 4 卡片标题文本垂直对齐到底部

Related 相关文章

  1. 1

    将Bootstrap导航对齐中心

  2. 2

    Bootstrap Glyphicons在底部导航栏上未垂直对齐

  3. 3

    Twitter Bootstrap:将导航标签与div底部对齐

  4. 4

    Bootstrap-导航栏中的底部对齐菜单

  5. 5

    是否可以将Twitter Bootstrap导航栏的按钮左对齐?

  6. 6

    Bootstrap 4:徽标增加导航栏高度时,垂直对齐导航链接

  7. 7

    如何将纯文本添加到Bootstrap 4导航栏?

  8. 8

    如何将bootstrap4导航栏转换为移动侧栏?

  9. 9

    Bootstrap 4将图标与<a>标记对齐

  10. 10

    Bootstrap 4:HTML-将Div与导航栏一起使用

  11. 11

    Bootstrap 4-将导航栏项目向右对齐

  12. 12

    Bootstrap 4-将div垂直对齐到列的底部

  13. 13

    Bootstrap 4导航栏右对齐搜索选项以及注册

  14. 14

    Bootstrap 4导航栏将内容下推

  15. 15

    调整屏幕大小时,Bootstrap 4导航栏将显示自动堆叠的ml-auto项目

  16. 16

    在Bootstrap中,如何将导航栏链接右对齐?

  17. 17

    Bootstrap 4粘性底部导航栏-底部导航栏下方的主要内容滚动

  18. 18

    bootstrap4在左侧对齐导航栏项目

  19. 19

    如何将纯文本添加到Bootstrap 4导航栏?

  20. 20

    尝试将导航链接与引导4中的徽标对齐

  21. 21

    在Bootstrap 4中更正导航栏链接的垂直对齐

  22. 22

    在bootstrap-4中将导航项与右侧对齐

  23. 23

    如何将 div bootstrap 网格中的文本对齐到底部?

  24. 24

    Bootstrap 4 Beta 2 - 导航栏:右对齐不折叠

  25. 25

    导航栏中的 bootstrap 4 按钮对齐

  26. 26

    将导航栏品牌和导航项目放在 Bootstrap 4 导航栏中的不同行

  27. 27

    Bootstrap 4 Tab 链接从导航栏输出

  28. 28

    使用行类将 div 拉伸到 Bootstrap 4 底部

  29. 29

    如何将 Bootstrap 4 卡片标题文本垂直对齐到底部

热门标签

归档