navbar-fixed-top 显示导航栏后面的内容

2024-02-27

滚动时如何防止内容浮动在导航栏后面?

<Navbar className="navbar-form navbar-fixed-top" responsive collapseable brand='x' inverse toggleNavKey={1} onClick={this.handleMouseDown}>

或者是在:

<Nav className="navigation"..

Thanks


将自定义类添加到您的navbar组件,比如说,sticky-nav。在其上定义以下 CSS 属性:

.sticky-nav {
  position: sticky;
  top: 0;
}

这将使您的导航栏粘在顶部,并自动调整其后续 DOM 元素的高度。您可以阅读更多有关sticky属性于MDN https://developer.mozilla.org/en-US/docs/Web/CSS/position.

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

navbar-fixed-top 显示导航栏后面的内容 的相关文章

  • 为什么示例中的 Bootstrap 5 中的折叠不起作用?

    我尝试使用引导崩溃 我复制了该示例 但单击按钮时没有任何反应 不知道出了什么问题 我认为 js 无法正常工作
  • React:按钮 onClick 函数在页面加载时运行,但您没有单击它

    我正在使用 ReactStrap 中的 ButtonGroup 和 Button 当您单击其中一个按钮时 我设置了一个 onClick 函数 lt ButtonGroup gt
  • React Router 默认路由重定向到 /home

    我对反应以及我选择使用的路由器和引导程序库非常陌生 它们基本上只是react router bootstrap 我只是对事物有了一些感觉 我想制作一个具有一些基本 url 导航的网络应用程序 我有 4 个部分 主页浏览添加和关于 单击链接效
  • 基本构造函数必须具有相同的返回类型

    我想将 jsx 重写为 tsx 我有一个从react bootstrap方法重写方法的代码 import Panel from react bootstrap class CustomPanel extends Panel construc
  • 覆盖从 NPM @Types 下载的 V2.2.2 中的 TypeScript 类型

    我正在使用该组件反应路由器引导程序和定义来自绝对打字 我的问题是下载的定义与组件不匹配 我创建了一个拉取请求来解决这个问题 但由于我不知道什么时候会修补它 所以我必须覆盖它 我不能只编辑位于的类型定义文件node modules types
  • React bootstrap 轮播不工作

    我正在尝试使用react bootstrap 创建一个简单的轮播 这是我试图创建的简单的不受控制的轮播 https react bootstrap github io components carousel https react boot
  • const 后出现意外的令牌

    当我尝试指定一个常量时 我 在 React 中遇到了意外的令牌错误 但我似乎无法弄清楚原因 我的代码非常简单 并且我遵循了react bootstrap示例here https react bootstrap github io compo
  • 使用react-bootstrap获取输入文本的值

    我尝试将值放入输入文本中 然后使用react bootstrap将其添加到文本区域 我知道我必须使用 ReactDOM findDOMNode 来获取 ref 的值 我不明白出了什么问题 这是我的代码 import React from r
  • 渲染 React-Bootstrap 组件时出错

    我最近从在 React 类中使用 twitter bootstrap 迁移到使用 React bootstrap 我想测试一下react bootstrap Navbar 我的代码如下 import React from react imp
  • 在 React Bootstrap 中设置 Form.Check(复选框)控件的样式

    我是反应和引导程序的初学者 我想知道 如何设计 Form Check 复选框 的样式 以便可以用更好的样式覆盖默认的外观和感觉 比如开关或任何其他外观和感觉 这就是我尝试过的 我使用了 css 样式 但它没有按预期工作 MyForm js
  • 反应引导手风琴未加载

    我正在尝试将 React bootstrap 与 Bootstrap 5 一起使用 我想在我的页面之一中使用 Accordion 为此 我刚刚复制了此页面的结构 gt https react bootstrap netlify app co
  • React-bootstrap 按钮 bsStyle

    好吧 我显然错过了一些东西 但现在无法弄清楚 import React from react import Button from react bootstrap let App React createClass render funct
  • React Bootstrap 弹出窗口在外部点击时关闭

    React Bootstrap 提供了一个弹出窗口控件 我希望在单击弹出窗口外部时将其关闭 其方式与模态的工作方式类似 默认情况下点击开箱即用即可将其关闭 有没有办法使用 ReactBootstrap 来做到这一点 或者我需要自定义代码吗
  • 反应引导 + purgeCss + next.js

    PurgeCss 删除了我的项目中使用的react bootstrap css 类 我正在使用 Next js 框架 app js import styles style scss import React from react impor
  • 使用带有 React-bootstrap 的 Nav 组件的手风琴侧边栏菜单

    我开始使用构建我的用户界面react bootstrap现在我有一个重要的任务是使用标准创建侧栏手风琴菜单bootstrap成分 我发现this http bootsnipp com snippets featured accordion
  • 更改 React Bootstrap 中展开的手风琴面板的标题样式

    对于单击和活动 展开的面板 我想更改 css 样式 那是因为我想切换面板标题内向上或向下指向的图像箭头 我能够获取打开面板的 eventKey 但无法使用面板标题CSS 类 你有什么建议 Thanks 代码如下
  • 带有react-router-dom NavLinks的react-bootstrap导航栏中的collapseOnSelect

    我正在制作一个网站 在其中使用 React router dom NavLink 组件来防止单页面应用程序体验的重新渲染 当我试图使网站响应时 我一直在尝试使响应式导航栏在选择 NavLink 后从 React Bootstrap 折叠 但
  • 如何在react-bootstrap中将导航栏居中

    我希望这是一个简单的问题 我看到有些人问了关于引导程序的类似问题 我无法将这些答案之一转化为适合我的解决方案 而且我认为无论如何可能有一个更简单的反应引导答案 代码示例在这里 https codesandbox io s yq5jvl9lz
  • 让 React 在表单输入字段下显示单独的错误消息

    我正在提交一个返回一系列错误的表单 但我无法弄清楚如何让每个单独的错误出现在正确的输入字段下 现在 所有错误都会打印在每个输入字段下 我在用着react bootstrap 任何帮助 将不胜感激 getValidationState var
  • 在react-big-calendar中单击事件时添加弹出窗口?

    当单击事件时 我无法将弹出窗口添加到事件中 弹出窗口似乎只显示在事件槽中 而不是显示在事件槽的顶部 此外 由于我为事件创建了一个自定义组件并尝试在自定义组件中实现弹出窗口 因此只有当我单击事件名称时才会显示弹出窗口 这是代码 class C

随机推荐