Bootstrap CSS 隐藏导航栏下方容器的一部分 navbar-fixed-top

2023-12-31

我正在使用 Bootstrap 构建一个项目,但遇到了一个小问题。我在导航顶部下方有一个容器。我的问题是容器的某些部分隐藏在导航顶部标题下方。我不想在容器中使用顶部边距。请参阅下面的 HTML,我在其中遇到了问题。

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/stylesheets/bootstrap.css"/>
<link rel="stylesheet" href="~/stylesheets/bootstrap-responsive.css"/>

</head>
<body>
    <div class="navbar navbar-fixed-top ">
        <div class="navbar-inner">
            <div class="container">
           <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
                <div class="nav-collapse"><ul class="nav" id="navbar"><li ng-class="{active:section=='plunks'}" class="active"><a href="/plunks/trending"><i class="icon-home"></i>Home</a></li><li><a target="_self" href="/edit/"><i class="icon-calendar"></i>General Election 2014</a></li><li class="divider-vertical">
                    </li><li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">
                        <i class="icon-eye-open">
                        </i>Assembly Elections
                        <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                                <li><a href="#/HTML5Apps">Assembly Elections 2013</a></li>
                        </ul>
                         </li><li class="divider-vertical">
                    </li><li ng-class="{active:section=='tags'}"><a href="/tags"><i class="icon-th"></i>Constituecy</a></li><li ng-class="{active:section=='discuss'}"><a href="/discuss"><i class="icon-time"></i>Election News</a></li><li class="divider-vertical"></li><li><a href="https://github.com/filearts/plunker"><i class="icon-bell"></i>Candidate</a></li></ul></div>
             </div>
         </div>
    </div>
  <div  class="container" >
   <ul class="nav nav-pills">
    <li class="active">
    <a href="#">Popular</a>
    </li>
    <li><a href="#">Trending</a></li>
    <li><a href="#">Latest</a></li>
    </ul>
   </div>

    <script src="~/Scripts/jquery.js"></script>
    <script src="~/Scripts/bootstrap-dropdown.js"></script>
    <script src="~/Scripts/Collapse.js"></script>
</body>
</html>

这是通过添加一些来处理的padding到顶部<body>.

As per Bootstrap 的文档.navbar-fixed-top http://getbootstrap.com/components/#navbar-fixed-top, 尝试您自己的值或使用下面的代码片段。提示:默认情况下,navbar is 50px high.

  body {
    padding-top: 70px;
  }

另外,请查看来源这个例子 http://getbootstrap.com/examples/starter-template/并打开starter-template.css http://getbootstrap.com/examples/starter-template/starter-template.css.

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

Bootstrap CSS 隐藏导航栏下方容器的一部分 navbar-fixed-top 的相关文章

  • 图像下方不需要的边距

    我有一个图像和一个 div 我想将其放置在其下方 这是小提琴 http jsfiddle net d3Mne 1 http jsfiddle net d3Mne 1 问题是两者之间存在差距 此下边距仅出现在图像中 有什么办法可以去除吗 Se
  • 如何在 HTML 中制作三角形?

    我想使用基本的 CSS 在 HTML 页面中制作三角形 我正在使用需要时间加载的三角形图片 因此 我想减少页面的加载时间 HTML 不可能 但 CSS 可以 例子 div class div
  • 获取 CSS 计算结果以设置自定义属性

    我正在测试一个 CSS 框架 用于通过微类指定数字 例如 类似的东西 div class fifty percent wide 可能会翻译成width 50 该实现使用 CSS 变量 自定义属性 考虑以下 CSS fifty number
  • 交替 div 使图像向左(偶数)或向右(奇数)

    我正在尝试更好地排列图像 而不仅仅是一列中的图像 请参阅附件中的示例 每篇文章的图像可以位于左侧和右侧 这是我的代码 HTML section class content list page section
  • 如何实现右边缘倾斜的 div? [复制]

    这个问题在这里已经有答案了 我几天来一直在寻找使 div 的右边缘倾斜 45 度的代码 这是我特别想要得到的图像示例 似乎有很多 倾斜边缘 div 的示例 但我找不到任何具有特定右侧倾斜的示例 我花了很多时间试图改变其他人的代码 但结果却一
  • CSS:多属性选择器

    我想设置 电子邮件 和 密码 类型的表单输入样式 但不设置其他任何样式 我正在想象类似以下的事情 input type email type password 然而 属性选择器的工作方式似乎将其解释为 输入 其中类型同时是 电子邮件 and
  • 可见性的替代方案:折叠在 IE 和 Chrome 上不起作用

    以下页面 table border 1 tr class cccc td one td tr table 仅适用于 Firefox IE 始终显示该行 而 Chrome 隐藏该行但显示其垂直空间 那么 如何仅使用 CSS 完全隐藏一行呢
  • 拖放区缩略图宽度图像大小

    如何更改上传图像的缩略图大小 我在我的javascript中尝试过thumbnailWidth 350 但是这不会增加缩略图大小 而缩略图只是看起来放大了 如何操作图像缩略图大小 HTML section section
  • 相对于变换元素的绝对定位元素位置

    我重新创建了我在模板中遇到的问题 有一个nav具有position relative 在 的里面nav有一个div有两个嵌套列表 其中一个列表的位置绝对固定在列表的底部nav 当div对其应用了变换 当 的时候div在绝对和相对定位的元素之
  • c# 如何生成锦标赛括号 HTML 表

    所以我已经被这个问题困扰了三个星期 但我一生都无法弄清楚 我想做的是使用表格获得这种输出 演示 http www esl world net masters season6 hanover sc2 playoffs rankings htt
  • 由于固定导航,增加了 FancyBox v2 的顶部和底部边距

    我目前正在开发一个网站 该网站将来将具有响应能力 该网站主要由图像组成 单击这些图像会加载到 FancyBox 中 FancyBox v2 现在具有响应能力 因此可以在屏幕尺寸发生变化时重新调整图像等的大小 作为我设计的一部分 我有两个固定
  • 响应式导航栏隐藏其下方的元素

    我创建了一个响应式导航栏 但它使下面的元素 Flexslider 插件 消失 在我制作导航栏之前 下面的 Flexslider 可以正常显示 但现在不行 导航栏的 z index 为 2 所以我不知道问题是什么 我应该如何 更改什么才能允许
  • 两种颜色边框

    客户想要两种颜色的边框以获得浮雕外观 我可以在一个元素上执行此操作吗 我希望避免堆叠两个具有单独边框的 DOM 元素 是的 使用outline财产 它充当您边界之外的第二个边界 但请注意 它可能会以一种奇怪的方式与边距 填充和阴影进行交互
  • 是否有针对 CSS 位置和可点击区域的 Android 浏览器错误的解决方法?

    当您有一些可点击的内容时 例如 a a
  • 为开槽元素中的后代元素设置样式

    是否可以选择开槽元素中的后代元素 像这样的例子 slotted div p color blue div p test p div 这不起作用 不 您只能选择顶级节点 slotted slotted 中的选择器只能是复合选择器 https
  • 由于 MIME 类型不受支持,拒绝应用样式

    我不断收到一条错误消息 指出 MIME 类型 text html 不可执行或不是受支持的样式表 MIME 类型 并且启用了严格的 MIME 检查 我的链接代码是
  • 通过 JavaScript 检测浏览器换行

    我需要 javascript 来检测每个浏览器包装的文本行并将其包装到 span class line 我读过一些关于测量每个单词的 y 轴的文章 但还没有看到可靠的解决方案 这是我到目前为止所拥有的 看到它Jsfiddle http js
  • 将样式添加到 mat-autocomplete 的 mat-option

    我有这个 HTML代码在这里 https stackblitz com edit angular mat autocomplete with selected value vx1uqg file src 2Fapp 2Fautocomple
  • Flexbox 不适用于 iPad 和 Safari [重复]

    这个问题在这里已经有答案了 我在网站上使用 Flexbox 但它在 iPad Air iPad 3 和 Safari PC 上崩溃 设计和代码与此 codepen 类似 http codepen io anon pen xwJzEg htt
  • 如何阻止破折号自行包裹?

    我有一个标题 标题最后一个单词的末尾是一个破折号 单词和破折号之间没有空格 当浏览器窗口变小时 破折号会中断并换成新行 在自己的行上有一个破折号是不好的排版 如何停止破折号之前的换行 以便最后一个单词运行到新行 这是代码 h1 XYZ co

随机推荐

  • 如何让gradle在项目根目录为maven用户生成有效的pom.xml文件?

    虽然现在只有两天 但我绝对愿意在我的所有 Java 项目中使用 gradle 并从我所有项目的根目录中删除 pom xml 但是 我希望保持与 maven 兼容 因为我希望 gradle 任务能够在用户需要的情况下在项目的根目录生成合适的
  • MongoDB 设计 - 标签

    我是 MongoDB 新手 我有一个关于 MongoDB 性能的设计问题 假设我的电影类有两个属性 名称和导演 我还想标记这个电影类 是向此类添加一个新的 strings 属性 还是创建一个新类 MovieTags 更好 我知道我会经常查询
  • J2ME 就像 Android 上的 Sprite

    对于本月无用的项目 我正在开发一个 模拟器 来在 Android 上运行 J2ME 程序 但现在我被 J2ME Sprite 实现困住了 特别是其中使用的转换 在我的 Sprite 中 我有一个包含三个角色图像的位图 我想将第二个框架绘制为
  • org.apache.tomcat.dbcp.dbcp.SQLNestedException:无法为连接 URL 'null' 创建类 '' 的 JDBC 驱动程序

    你好 当我尝试使用 JNDI 连接到数据源时 出现以下错误 org apache tomcat dbcp dbcp SQLNestedException Cannot create JDBC driver of class for conn
  • Web服务命名空间动态命名

    我有一个web service我将部署到开发 登台和生产 与此同时 还将有一个ASP net将单独部署但也在这三个阶段中的应用程序 更改 Web 服务中的以下行以匹配当前环境的最实用方法是什么 WebService Namespace ht
  • 反序列化 Json XYZ 点

    Autodesk Revit 开发 我将 XYZ 点从容器 点和标签 中序列化为类 点 到文件 public class Serialize pack public View 3D Data v3ddata public Tag Class
  • 如何在 R/quantmod 的图表系列/蜡烛图中显示差距

    我试图使用优秀的 R Quantmod 包中的绘图函数来显示财务数据中的 差距 通常 R 允许您使用 NA 值显示图中的间隙 如下所示 x lt 1 10 y lt 2 x y 4 7 lt NA plot x y type l 我想用 R
  • NodeJS 控制台语法错误:生成器的意外标记 *

    我正在运行 NodeJS 控制台 node version v0 12 0 我正在尝试实现一个生成器函数 例如这个 function colorGen var colors red green blue white var i 0 yiel
  • 给定多个二叉树,更本地化、更高效的最低公共祖先算法?

    我有多个二叉树存储为数组 每个槽中要么是 nil 或 null 选择您的语言 要么是存储两个数字的固定元组 两个 子项 的索引 任何节点都不会只有一个子节点 要么没有 要么有两个 将每个槽视为一个二进制节点 仅存储指向其子节点的指针 并且没
  • 在64位系统中分配超过4GB内存

    我正在运行此代码 该代码是在 32GB 的 Windows Server 2008 R2 上的 64 位 vc 2005 上编译的 for 循环内存在访问冲突 include
  • 我想编写一条规则,不允许第二次添加相同的文档

    rules version 2 service cloud firestore match databases database documents match users usersID allow read allow write if
  • 飞碟中的 pdf 页面之间的嵌入图像被破坏

    我对图像有一些问题 所有图像都作为 base64 字符串嵌入 html 中 我使用CSS img page break inside avoid 它会有所帮助 但并不总是如此 在某些情况下 可以正确处理同一图像 而在其他情况下 可以在页面之
  • If Else 在 LINQ 中

    是否可以在 LINQ 查询中使用 If Else 条件 就像是 from p in db products if p price gt 0 select new Owner from q in db Users select q Name
  • python-requests 相当于curl的--data-binary?

    Curl 可以选择按原样发送文件 数据二进制选项 http curl haxx se docs manpage html data binary 当测试时Qualys WAS API http www qualys com docs WAS
  • 将背景图像添加到 ui 集合视图

    我是 iOS 开发新手 我想知道如何添加一个背景图像 该背景图像将垂直重复到我创建的用于显示图像数组的 UI 集合视图 这也可以工作 而且我认为比使用背景颜色的解决方法更正确 去寻找背景视图直接地 void viewDidLoad supe
  • QtCreator 4 和 CMake 参数

    我曾经使用 QtCreator 打开基于 CMake 的 C 项目 并在配置项目时传递我的自定义 CMake 命令行参数 在 QtCreator 的最新版本 准确地说是 QtCreator 4 中 这似乎不再可能了 QtCreator 使用
  • NSIS反编译器

    任何熟悉 NSIS 反编译器的人 谷歌不是 谢谢 乙 如何访问 NSIS 安装程序脚本 好吧 这就是这篇文章的大主题 http netcologne dl sourceforge net project nsis NSIS 202 2 09
  • 将人员随机分配到不同规模的组和类别中

    我需要将人们随机分配到组和类别中 不幸的是 我真的不知道从哪里开始 我尝试使用下面的示例来解释我的问题 任何对此的帮助将不胜感激 I have 207 A 型住宅 和408 B 型住宅 类别 总共有1524需要分配到 207 Home Ty
  • Condor 输出文件更新

    我正在使用 Condor 运行几次模拟 并对程序进行编码 以便它在控制台中输出进度状态 这是在循环结束时完成的 它只是打印当前时间 也可以是百分比或经过的时间 代码看起来像这样 printf START while programNeeds
  • Bootstrap CSS 隐藏导航栏下方容器的一部分 navbar-fixed-top

    我正在使用 Bootstrap 构建一个项目 但遇到了一个小问题 我在导航顶部下方有一个容器 我的问题是容器的某些部分隐藏在导航顶部标题下方 我不想在容器中使用顶部边距 请参阅下面的 HTML 我在其中遇到了问题 div class div