css - 更改 Bootstrap Navbar Container 垂直对齐的位置

标签 css bootstrap-4

试图弄清楚如何更改引导导航栏内容器的默认行为。默认情况下,它在导航栏包装器中垂直对齐中心(见下图),但我希望它与顶部对齐。

Default behiavior

截至目前,我正在使用 Bootstrap 在其网站上为导航栏提供的示例,仅进行了一些小的调整。

尝试将 vertical-align 属性添加到 .navbar 和 .container 类,但它没有改变任何东西。也许是 flex 设置?

最佳答案

您可以将 .navbar 上的 align-items:center; 更改为 align-items: flex-start;,或者您可以添加将引导实用程序类 .align-items-start 放到导航栏上。

<nav class="navbar navbar-expand-lg navbar-light bg-light align-items-start">
    ...
</nav>

您可以在这里阅读更多关于 flexbox 的信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

关于css - 更改 Bootstrap Navbar Container 垂直对齐的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52999756/

相关文章:

css - 如何在 div 标签中居中视频标签?

html - bootstrap-select 在 Bootstrap 下拉菜单中不起作用

css - 使用 webpack 引导

css - 如何在没有折叠展开功能的情况下在移动屏幕中垂直布局导航栏

javascript - jquery 麻烦——将字符串添加到动态命名的元素

html - 将 Bootstrap 3 div 放在居中的 div 中以居中

javascript - 如何在javascript中将背景颜色从白色慢慢淡入红色

javascript - 如何设置一个 div (#jumbotron) 是视口(viewport)的高度减去动态变化的另一个 div (#header) 的高度

css - 使用 bootstrap-4 的 Material 设计输入

html - HTML 文本周围的小圆圈图像/图标