Bootstrap 4 多个固定顶部导航栏

2024-04-13

Bootstrap 4 中是否可以有多个固定顶部导航栏相互显示?

1 目前覆盖了另一个,这不是我想要的。


是的,这是可能的,但你必须相应地定位第二个。导航栏的高度约为 56 像素。

.fixed-top-2 {
    margin-top: 56px;
}

body {
    padding-top: 105px;
}

<nav class="navbar navbar-toggleable-sm bg-faded navbar-light fixed-top fixed-top-2">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href="/" class="navbar-brand">One</a>
    <div class="navbar-collapse collapse" id="navbar1">
        <ul class="navbar-nav">
            ..
        </ul>
    </div>
</nav>

<nav class="navbar navbar-toggleable-sm bg-inverse navbar-inverse fixed-top">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href="/" class="navbar-brand">Two</a>
    <div class="navbar-collapse collapse" id="navbar2">
        <ul class="navbar-nav">
            ..
        </ul>
    </div>
</nav>

演示:Bootstrap 4 多个固定顶部导航栏 http://www.codeply.com/go/XUf1n70jny

在某些情况下,使用single fixed-topDIV 包含两者 https://stackoverflow.com/questions/48773669/bootstrap-4-multiple-fixed-navbars-with-animated-shrink/48774705#48774705.

另请参阅:
Bootstrap 4 导航栏在标题后粘住 https://www.codeply.com/go/oY2CyNiA7A/navbar-simple-sticky-top
Bootstrap 4 将两个导航栏折叠成一个切换按钮 https://stackoverflow.com/questions/48970058/bootstrap-4-collapsing-two-navbars-into-one-toggle-button

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Bootstrap 4 多个固定顶部导航栏 的相关文章

  • Bootstrap 全角,有 2 种不同的背景(和 2 列)

    这有点难以解释 这就是为什么我在谷歌上也找不到答案 我正在使用 Bootstrap 3 并且需要全宽背景图像 在那 2 个透明颜色背景之上 我制作了一个示例图片以使其更清楚 1 2 组合透明彩色背景 3 4 组合透明彩色背景 1 2 3 4
  • 引导下拉菜单 同一水平行上的两个链接

    我正在使用 Bootstrap 制作下拉菜单 我想要的选项之一是下拉菜单中同一水平行上的两个链接 我将如何实现这一目标 div class navbar div class navbar inner li class dropdown a
  • Bootstrap Glyphicons 在 IE10 或 FF 中不显示

    我无法在 IE10 或 FF 中显示引导字形图标 我正在使用最新的 bootstrap 3 代码 并以标准方式包含字形 span class glyphicon glyphicon edit span 它们在 Chrome 中工作正常 但在
  • Twitter 引导工具提示不适用于全日历中的事件

    我想显示有关事件的引导工具提示亚当 肖的完整日历 http fullcalendar io 我尝试了这段代码 eventMouseover function event jsEvent this tooltip this css rel t
  • BootStrap3 单击该项目后保持下拉菜单打开

    我正在使用 Bootstrap 3 0 它具有出色的下拉菜单 如果我单击下拉菜单之外的区域 菜单就会消失 这没关系 但是当我单击下拉菜单项时 菜单消失 我不希望发生这种情况 并且没有选项可以控制切换行为 我希望菜单在单击其中一项后保持打开状
  • 从 Bootstrap 4 网格中删除装订线

    在 Bootstrap 4 中 我被要求自定义桌面的默认网格系统 如下所示 其中 容器 桌面断点为1280px 我尝试过的例子是 body margin top 3rem l wrap max width 1280px margin rig
  • 将下拉按钮和下拉菜单放在中心?

    div class dropup center block div
  • angular.js ui + bootstrap typeahead + 异步调用

    我将 typeahead 与 angular js 指令一起使用 但填充自动完成的函数进行了异步调用 我无法返回它来填充自动完成 有没有办法让它与这个异步调用一起工作 我可以假设您正在使用 Bootstrap 2 x 的 typeahead
  • Twitter 的 Bootstrap 是否像 Skeleton 一样适合移动设备?

    骨架经过缩放以适应移动浏览器 遵循以下原则响应式网页设计 http www abookapart com products responsive web design Bootstrap 提供同样的功能吗 还没有 http groups g
  • 外部 css 文件在 Flask 框架中不起作用

    我正在尝试在我的 html 文件中使用外部 css 文件 起初我使用 bootstrap 框架 效果很好 然而 当我尝试通过添加自定义的css文件来自定义网页时 它根本不起作用 这是我的代码
  • 多选复选框下拉

    我正在使用多选复选框下拉菜单 请看例子jsfiddle http jsfiddle net manthan11 qqhczbvs 6 function lstStates multiselect 选择州后 它会显示 TEXT 值并用逗号连接
  • 如何使用 jQuery 单击特定链接时打开引导导航选项卡的特定选项卡?

    我是 jquery 和 bootstrap 的新手 所以请考虑我的错误 我已经创建了一个用于登录和注册的 bootstrap 模式 它包含两个导航选项卡 称为登录和注册 我有两个按钮可以弹出相同的模态窗口 但在模态窗口内显示不同的选项卡 每
  • 引导行之间的垂直间距

    所以我正在研究布局 为了 响应能力 我决定使用 Bootstrap 现在我猜网格系统有问题 我想要的结果如下 1 4 2
  • 如何在bootstrap中默认隐藏侧边栏?

    我在这里有一个很好的参考 作为 Bootstrap 在设计 Web 表单应用程序时的侧边栏 http startbootstrap com template overviews simple sidebar http startbootst
  • 您可以将现有的 div 复制到模式对话框吗

    我有一个带有多个面板的仪表板来显示不同的信息 我希望能够添加一个按钮来以模式显示面板 我正在使用引导程序 我所能找到的只是已经编写的模态 我想复制作为面板的 div 标签的内容 然后将其显示在模型中 但我不确定如何进行 该面板的 html
  • 引导标签输入宽度

    我正在尝试使用引导程序标签输入 http timschlechter github io bootstrap tagsinput examples 以模态中包含的形式 像这样 div class form group div
  • 模态中的引导模态

    如何使用 Jquery 在另一个模态中构建引导模态 第一个模态应该在后台 当我参考引导文档时 发现一次显示多个模式需要自定义代码 任何想法 您可能想尝试 Bootstrap Modal 插件 此处演示 可堆叠 http jschr gith
  • 单击列表时使用 bootstrap Dropdown 防止下拉菜单消失

    我正在使用使用引导下拉菜单 http twitter github com bootstrap javascript html dropdowns生成下拉菜单 我想防止点击菜单时菜单消失 我已经实现了以下代码 但它不起作用 知道如何修复它吗
  • 引导程序。如何添加多个add affix属性?

    我正在使用 Bootstrap Affix 如下所示 div 我添加这个 css 来修复触发附加时的位置 affix position fixed top 20px z index 1 margin left auto margin rig
  • 一页上有多个容器

    我最近开始使用 Twitter Bootstrap 并尝试了解它是如何工作的 我正在看流体布局示例 http twitter github com bootstrap examples fluid html源代码 有两个容器 div cla

随机推荐