Bootstrap 修复了带间距的导航栏
Bootstrap Fixed NavBar with Spacing
我在我的应用程序中使用了两个导航栏,它们在较小的屏幕中单独折叠。
在某些屏幕中,我将有两个导航栏,而在某些屏幕中,只有顶部。
通过将 navbar-fixed-top
添加到导航栏,它会粘在顶部,但我想将它们堆叠在彼此的顶部,并且页面内容应在下方适当间隔,以便它具有可见性并且不会隐藏在导航栏下方。
要使页面内容从固定导航栏下方开始,您需要向正文添加固定高度 padding-top
(请参阅 http://getbootstrap.com/components/#callout-navbar-fixed-top-padding)。由于您有一个或两个导航栏,因此您需要两个具有不同高度的 classes 并将其中一个添加到 body
.
要使第二个导航栏显示在第一个导航栏下方,您可以向其添加 class(例如 .navbar-fixed-top--secondary
),从而获得 top: 50px
.
我在我的应用程序中使用了两个导航栏,它们在较小的屏幕中单独折叠。 在某些屏幕中,我将有两个导航栏,而在某些屏幕中,只有顶部。
通过将 navbar-fixed-top
添加到导航栏,它会粘在顶部,但我想将它们堆叠在彼此的顶部,并且页面内容应在下方适当间隔,以便它具有可见性并且不会隐藏在导航栏下方。
要使页面内容从固定导航栏下方开始,您需要向正文添加固定高度 padding-top
(请参阅 http://getbootstrap.com/components/#callout-navbar-fixed-top-padding)。由于您有一个或两个导航栏,因此您需要两个具有不同高度的 classes 并将其中一个添加到 body
.
要使第二个导航栏显示在第一个导航栏下方,您可以向其添加 class(例如 .navbar-fixed-top--secondary
),从而获得 top: 50px
.