gpt4 book ai didi

html - 使用 Bootstrap 导航栏作为固定的顶部栏,不会折叠

转载 作者:太空宇宙 更新时间:2023-11-04 03:22:56 25 4
gpt4 key购买 nike

我正在尝试做一件简单的事情:顶部栏(如固定导航栏)左侧有品牌名称,右侧有 2 个图标。我正在为移动设备开发,所以我不希望它为小屏幕改变(折叠,就像默认情况下的导航栏一样)。

我对 Bootstrap 比较陌生,所以我想我做错了什么。

为了防止崩溃,我把所有东西都放在了navbar-header中分区我创建了一个 <span class="pull-right">使图标正确显示,但我无法正确呈现它们。

(我怀疑这是否重要,但我使用的是 Bootstrap 3.0.x。)

这是我目前拥有的:http://jsfiddle.net/rd73tecL/2/

最佳答案

尝试使用以下 CSS 来禁用折叠效果(此处引用:Bootstrap 3 - disable navbar collapse):

.navbar-collapse.collapse {
display: block !important;
}

.navbar-nav>li, .navbar-nav {
float: left !important;
}

.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}

.navbar-right {
float: right !important;
}

我不确定右边的 2 个图标是什么意思:在 Logo 的最右边还是导航栏的右边?如果是后一种情况,您可以将导航栏链接放入一个 div 中并添加 pull-right 类以将其放在导航栏的右侧。然后,您还需要将 display: inline-block !important; 添加到导航栏 Logo 的 css 中,如 JSfiddle 所示。

希望对您有所帮助。

关于html - 使用 Bootstrap 导航栏作为固定的顶部栏,不会折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27612156/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com