在 Bootstrap 导航栏后添加一些空间的最佳方法是什么?

2024-05-07

以下代码始终在页面顶部显示导航栏。 我需要将第二个容器(内容)放置在导航栏的末尾而不是其下方。 目前第二个容器位于导航栏下方。

我可以在内容顶部添加一些空白,但我不确定这是一个好方法。 知道如何解决吗?

 <div class="container">
        <div class="row">
            <div class="container">
                <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                    <div class="container">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                        </ul>
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                </nav>
            </div>
        </div>
        <div class="row">
            <div ng-view></div>
        </div>
    </div>

2018年更新

引导程序3

根据 Bootstrap 文档(http://getbootstrap.com/components/#navbar-fixed-top http://getbootstrap.com/components/#navbar-fixed-top)你应该使用padding-top身体上..

“固定导航栏将覆盖您的其他内容,除非您添加 填充到 的顶部。尝试您自己的价值观或使用我们的价值观 下面的片段。提示:默认情况下,导航栏的高度为 50 像素。”

body { padding-top: 70px; }

Demo: http://www.bootply.com/Ob3Bajkv1f http://www.bootply.com/Ob3Bajkv1f


引导程序4

还建议使用衬垫fixed-topBootstrap 4 中的导航栏可防止内容隐藏在正文顶部。您可以添加自定义 CSSpadding-top或使用pt-5body 标签上的实用程序类:

<body class="pt-5"></body>

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

在 Bootstrap 导航栏后添加一些空间的最佳方法是什么? 的相关文章

  • 如何使用 Angular 创建 n 个可打印页面?

    嗯 我搜索了一下 没有找到类似的东西 我想知道如何使用 Angular 创建可打印内容 跳转到页面末尾并打印更多内容 如何强制内容始终适合特定尺寸 例如 PDF 我需要 Angular 来执行此操作吗 如果不是 HTML 我可以迭代 PDF
  • 在 Rails App 中实现 WrapBootstrap 主题

    我刚刚购买了一个 wrapbootstrap 主题 并尝试将其插入我的 Rails 应用程序中 一些 css 如填充 导航栏 字形图标 和大多数 javascript 无法正常运行 我将所有样式表和 javascript 分别复制到 ass
  • Twitter 的 Bootstrap 弹出窗口不起作用

    我正在使用 Bootstrap 的 popover 插件 link http twitter github com bootstrap javascript html twipsy 但它不起作用 HTML a class danger hr
  • 加载 HTML 格式的大型视频文件

    这是我的问题 我想播放存储在 S3 存储桶中的大型视频文件 3 6Gb 但该文件似乎太大 并且加载 30 秒后页面崩溃 这是我播放视频的代码 var video document getElementById video const med
  • 如何在 Popup div 中加载 iframe 内容?

    如何在 Popup div 中加载 iframe 内容 单击每个链接时将打开弹出 div 从每个链接 页面 url 将加载到弹出 div 内的 iframe href document ready function openpop clic
  • 如何使用 Angular 1.5 中的组件为每个页面设置标题

    我最近开始使用 Angular 1 5 组件 我的应用程序中有多个页面 所以我决定创建一个
  • 无法居中对齐画布

    我一直在谷歌搜索解决方案但无济于事 我只想center align my canvas 我努力了float center text align center margin top 100px但我的舞台没有在浏览器中居中对齐 任何帮助表示赞赏
  • 该脚本在 IE 中不起作用。我该如何修复它?

    有一个脚本可以根据用户的显示器屏幕分辨率更改页面模板 但是 它在 IE 中不起作用 请告知如何修复它 table align center tr td head td tr tr td nbsp td td nbsp td td nbsp
  • 强制应用媒体查询

    我有这个 html 和 css 代码 div class wrapper div class a div div class b div div media all and max width 400px max height 300px
  • div 准备好后如何调用函数?

    我的 javascript 文件中有以下内容 var divId divIDer jQuery divId ready function createGrid Adds a grid to the html html 看起来像这样 div
  • 如何在绝对定位的 div 内用 CSS 创建粘性页脚?

    我想创建一个粘性页脚inside绝对定位的 div 元素 我的方法是将页脚 div 也绝对定位 在另一个相对定位的 页面 div 内 其中包含页面的实际内容 div class content div class page Some Lor
  • 如何使div垂直滚动[重复]

    这个问题在这里已经有答案了 我用图片元素列表做了一个水平滚动 但是当我垂直滚动它时我失败了 我的水平滚动条代码是 div class pic container div class pic row div style width 100 a
  • 如何在 CSS 中选择纯 HTML 文本?

    你们有人知道如何在 CSS 中选择纯 HTML 文本吗 我有以下结构 div p class caption caption1 p div class tabs div class moving bg div p class text ta
  • 如何选择一个元素但排除其子元素

    我明白 div hover not class 作品 但是 如何实现 LI 元素的 悬停 效果 但排除鼠标悬停在LI内的某个 DIV 上时的悬停效果 E G li Hello div Bye div li 我想获得 li 的悬停效果 li
  • 如何让 ExtJS ComboBox 与文本一起显示?

    我想让以下内容显示在一行中 我尝试过使用样式浮动和显示 Show this input
  • 将 h2 标签嵌套在另一个带有 h1 标签的标头中在语义上是否错误?

    将 h2 标签嵌套在另一个标头 h1 标签内在语义上是否错误 h1 class fixed h2 class absolute Absolute Div h2 h1 语义错误 很大程度上是一个观点问题 语义 意味着 与意义相关 但这里的含义
  • 设置引导工具提示上的箭头样式[重复]

    这个问题在这里已经有答案了 我正在尝试使用以下方式设置工具提示样式 tooltip inner 但我遇到了麻烦 因为我找不到如何设置工具提示小箭头的样式 如屏幕截图所示 工具提示的箭头是黑色的 我想在其上添加新颜色 any suggesti
  • 单击行内的按钮时防止触发表行 onclick 事件

    我有一个带有 ONCLICK 事件的表行 切换下面的附加数据 在其中一个行单元格内有一个按钮 单击时执行 AJAX 操作 当我单击按钮时 行的 onclick 事件也会触发 并且会发生附加数据在 AJAX 调用完成之前出现 这对我来说是一个
  • 如何使弹出窗口溢出:在溢出内可见:自动上下文

    我有一个 div 列表 如果超过父框 overflow x 应该滚动 并且在悬停时 我想看到一个弹出窗口 我的问题是 如果我将鼠标悬停在任何子 div 上 弹出窗口将被考虑用于溢出计算 但我只想让它在所有内容之上可见 而不是使其扩展滚动区域
  • IE10 中的弹性盒

    我试图让弹性框在 IE10 中工作 但它不起作用 Safari Chrome 和 Firefox 工作正常 但 IE10 不工作 有人知道答案吗 代码笔 http codepen io anon pen vcEGH http codepen

随机推荐

  • IntelliJ IDEA 无法在 Ubuntu 上启动

    我用IDEA好几个月了 到现在还可以 现在从快捷方式启动IDEA没有效果 我想这是在一些更新之后发生的 我尝试重新安装IDEA 但问题仍然存在 从终端启动 idea sh 会产生类似的效果 chronoexp ChronoExp PC Pr
  • mysql REPLACE 具有多个主键的查询

    因此 如果存在与插入数据具有相同主键的列 则 MYSQL 的 REPLACE 命令 不要与字符串替换函数混淆 将替换一行 但是如果我有两个主键并且我想使用这两个主键来指定要替换的行而不仅仅是其中一个 我如何指定 mysql 使用两个键而不是
  • 将每月数据分解为每日数据

    我有一家公司的预算数据 采用以下每月格式 SqlFiddle 链接在这里 http sqlfiddle com 3 09263 1 Dept YearMonth Budget 001 201301 100 001 201302 110 00
  • 将聊天文本中的成对符号替换为 html 标签,以设置粗体、斜体和删除线样式

    我正在尝试制作 Whatsapp 风格的文本帖子 当用户创建这样的文本时 Hi how are you where are you 然后这个文本会像这样自动改变 Hi你好吗你在哪 我知道我可以使用 php 正则表达式来做到这一点 如下所示
  • 如何修复 Python 中损坏的 utf-8 编码?

    我的字符串是Ni m B T t Thi n s Nh t H nh 我想将其解码为Ni m B T t Thi n s Nh t H nh 我在那个网站上看到可以做到这一点http www enderminh com minh utf8
  • 文件嵌套时嵌入资源名称丢失扩展名

    我有一些脚本存储在我标记为嵌入式资源的文件中 我将每个文件嵌套在其关联的下面 cs文件 不幸的是 由于某种原因 当您以这种方式嵌套文件时 嵌入的资源名称会丢失文件扩展名 这意味着在运行时我无法识别哪些嵌入式资源是脚本 哪些不是脚本 对此我能
  • Pandas dataframe ,使用 iloc 替换最后一行

    我正在尝试使用 iloc 替换 Pandas 数据帧的最后一行 但是我无法让它工作 有很多解决方案 但最简单 最慢 的是这里 如何在 Python 中对 Pandas 数据帧上的行进行 FIFO 推送操作 https stackoverfl
  • 如何使用 Python 从 Azure Functions 中的辅助线程重定向日志

    我正在使用 Azure 函数运行启动多个线程的 Python 脚本 出于性能原因 一切都按预期工作 但 Azure Functions 日志中仅显示来自 main 线程的信息日志 我在 main 中启动的 辅助 线程中使用的所有日志都不会出
  • JavaFX 3D 面孔着色...再次

    我研究了这个question https stackoverflow com questions 26831871 coloring individual triangles in a triangle mesh on javafx 但我还
  • 如何使用pdfbox获取字体大小

    有谁知道 TextPosition 中的 getFontSize 方法是否总是返回 1 我应该只使用 getFontSizeInPt 来获取字体的大小吗 我遇到的问题是 getFontSizeInPt 有时会为相同大小的文本返回不同的值 对
  • 获取 Prometheus 中两个自定义时间戳之间的增量

    我有一个名为的普罗米修斯指标device number 我想要的是显示现在与一天 一周 一个月等之前的价值差异 这意味着减去具有两个不同时间戳的两个值 环顾四周 我没有找到任何关于如何执行此操作的有用文档 我想做但不起作用的是 sum de
  • JFreeChart奇怪的渲染(无头RedHat)

    我目前正在将一个应用程序从 Windows 环境迁移到 Redhat 环境 该应用程序使用 JfreeChart 1 0 6 它是部署在运行 Open JDK6 的 Redhat 无头环境中的 tomcat 7 中的 Web 应用程序 我得
  • 使用 WordPress 中的钩子在帖子更新(自定义帖子类型)后获取更新值

    我想获得更新后操作的最新更新值 我已经使用了 save post post updated publish post挂钩但全部返回旧值 但我同时需要当前更新值 我试过下面的代码 add action post updated wpse634
  • Materialize CSS,显示自动完成芯片的图像

    文档物化芯片 http materializecss com chips html展示您可以用图像制作芯片 div class chip img src images yuna jpg alt Contact Person Jane Doe
  • 如何添加到 OrientDB 中的空间索引?

    我正在使用工作室的 OrientDB 2 0 我使用文档中的代码成功创建了 Lucene 空间索引 CREATE class Place extends V CREATE property Place name string CREATE
  • 更改列名称的字母大小写

    我有大量数据集 每个数据集都包含一长串列名 在某些文件中 列名称全部大写 而在某些文件中 仅列名称的第一个字母大写 我需要附加数据集 并认为匹配数据集中的列名称的最简单方法是将全大写名称转换为仅第一个字母大写的名称 我希望找到一个通用的解决
  • 如何从symfony2中的现有表生成实体?

    我有带有一些字段的表 my table 我想在 MyBundle 中使用 my table 生成实体 但我不想重新创建 MyBundle 中的所有实体 我怎样才能做到这一点 这是你可以做到的方法 第一步 要求Doctrine自省数据库并生成
  • npm install 冻结并显示 IdealTree:chatting: sill IdealTree buildDeps

    当我安装任何东西时 npm 冻结了 即使删除 package lock json 也没有任何变化 这里有一个类似的问题 https stackoverflow com questions 50522376 npm install hangs
  • 如何以编程方式获取 Android 项目(非设备)中支持的语言列表

    在一些项目中我们可能会出现这种情况 如何以编程方式获取此应用程序 项目支持的语言列表 结果我需要这样的字符串数组 en bg bs da de hr it nl pl pt sk sr tr 当然 我可以通过键入它来对其进行硬编码 但我认为
  • 在 Bootstrap 导航栏后添加一些空间的最佳方法是什么?

    以下代码始终在页面顶部显示导航栏 我需要将第二个容器 内容 放置在导航栏的末尾而不是其下方 目前第二个容器位于导航栏下方 我可以在内容顶部添加一些空白 但我不确定这是一个好方法 知道如何解决吗 div class container div