Bootstrap 3:100%高度后如何粘贴

2024-01-18

我试图让我的导航栏在设置为 100% 高度的介绍后固定到顶部,但我不确定执行此操作的最佳方法是什么?

Code:

CSS
html, body{ height: 100%; min-height: 100%;} 
.intro {height: 100%;text-align: center;}

HTML
<div class="intro">
  <div class="container">
    <h1>Lorem Ipsum</h1>
  </div>
</div>

<nav>
  <div class="container">
    <div class="navbar-header" data-spy="affix">
      <button type="button" class="navbar-toggle"  data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Test Navbar</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

编辑:我正在使用 Bootstrap 3.0。


您可以使用 jQuery 函数来计算高度#intro

$('nav').affix({
      offset: {
        top: $('.intro').height()
      }
}); 

这是一个以类似方式工作的演示..

http://bootply.com/106399 http://bootply.com/106399

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

Bootstrap 3:100%高度后如何粘贴 的相关文章

  • 如何在 jQuery 中将标题转换为 URL slug?

    我正在 CodeIgniter 中开发一个应用程序 我试图在表单上创建一个字段来动态生成URL slug 我想做的是删除标点符号 将其转换为小写 然后用连字符替换空格 例如 Shane s Rib Shack 将变成 shanes rib
  • Pjax动画

    我终于让 pjax 工作了 但我还有另一个问题 如何添加一些 jquery 动画 如淡出 幻灯片旧内容和淡入 幻灯片新内容 默认情况下 pjax 只是更改内容 没有任何好看的效果 任何帮助将非常感激 此致 基本上 你有一堆事件 https
  • jquery 当前可见的第 n 个子级

    我可以像这样设置每 4 个 item div 的样式 jQuery item nth child 4n addClass fourth item 这工作得很好 但后来我隐藏了一些项目 显示了其他一些项目 并想重新做这个样式 但只对每第四个可
  • 选择 asp.net CheckBoxList 中的所有项目

    ASP NET 和 C 我想要一个带有 全选 项目的复选框列表 当这个特定项目是 已选择 所有其他都将被选择 也 当选择被删除时 这个项目 也将来自所有人 其他物品 选中 取消选中 任何其他项目只会有一个 对特定项目的影响 无论选择状态如何
  • Angularjs : $locationProvider.hashPrefix("!") ;

    我想将网址显示为 www test com 因为我正在使用 locationProvider hashPrefix 但它显示网址为 www test com 我想 哈希之前而不是哈希之后 Thanks var app angular mod
  • 如何使用 jQuery 单击特定链接时打开引导导航选项卡的特定选项卡?

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

    我正在尝试构建类似 WordPress 选项的东西 用于在创建文章时切换字段可见性 我所构建的依赖于 click函数使用相应的字段名称切换父项 我想知道如果选中该复选框 执行此操作的最佳方法是什么 因为如果您选中一个框并重新加载页面 因为它
  • 将 JSON 属性绑定到表单

    我有一个 JSON 对象和一个
  • 将一个文本框的值分配给另一个文本框

    看过类似问题的答案 但对于我的一生 我无法弄清楚我做错了什么 我有两个文本框和一个按钮 当文本添加到第一个文本框并按下按钮时 我想将第一个文本框的值 文本应用到第二个文本框
  • 将列名称与具有 AJAX 数据源的 DataTable 一起使用

    我正在尝试升级我的系统以使用 DataTables 1 10 而不是 1 9 并且我正在尝试找到一种使用 JSON 对象而不是列表传回行内容的方法 具体来说 而不是以格式传回数据 data data data data data data
  • 如何修复 IE6 上的不透明度

    如何修复 IE6 上的不透明度 此代码不适用于 IE6 filter alpha opacity 50 moz opacity 0 5 khtml opacity 0 5 opacity 0 5 还有这段代码 description ani
  • 选中复选框时如何向文本区域添加值

    我正在使用我刚刚在 SO 上找到的以下函数 该函数可以解决我的问题 只有一个问题是 我有一长串选择列表 当用户选中超过 3 4 个复选框时 某些文本或添加到文本区域的值不再可见 有没有什么方法可以让每次选中一个框时添加到文本区域的文本始终可
  • init 后用 JSON 填充 select2 不起作用

    我正在尝试使用 JSON 数组填充 select2 元素 但我无法得到它 我有下一个数组 data id Foo text Foo id Bar text Bar 我初始化 select2 如下 selectElement select2
  • jQuery 位置 DIV 固定在滚动顶部

    我有一个相当长的页面 在布局的菜单中 有一个弹出菜单 我希望菜单的弹出部分显示在页面顶部 即使用户已将菜单栏滚动到视图之外 这是菜单的 HTML div div Compare up to 3 cards side by side Clic
  • JQuery .hasClass 用于 if 语句中的多个值

    我有一个简单的 if 语句 if html hasClass m320 do stuff 这按预期工作 但是 我想添加更多的类if statement检查是否存在任何类标签 我需要它 所以它不是全部 而只是至少一个类的存在 但它可以更多 我
  • 使用 setAttribute() 添加“onclick”函数

    为什么以下不起作用 显然该功能尚未添加 function activatetypeinput event devtype The function is called but it doesn t set the attribute var
  • 无法在 JavaScript for 循环中读取 null 的属性“长度”

    我正在尝试制作一个像 Stack Overflow 那样的 Markdown 编辑器 如果我实际上没有在文本区域中键入星号和包含短语的 http 我会收到标题中列出的此错误 如果我只输入包含星号的短语 则错误指的是这一行 if linkif
  • 在 javascript、jQuery 或 css 中,如何让 div 或 iframe 展开以填充其余空间

    我有三个 iframe 我将顶部 iframe 设置为 50px 高度 将底部 iframe 设置为 50px 但我希望中间 iframe 扩展以填充其余空间 有没有一种技术可以用来对任何窗口屏幕尺寸执行此操作 谢谢 example
  • 当复选框条件更改时,如何使用ajax更新mysql数据库?

    我有一个在客户端按行显示的文章表 每篇文章都有一个唯一的 ID 并包含一个复选框以指示该文章是否被选中为收藏夹 如果它是最喜欢的 则该复选框已被选中 如果没有 则未选中 现在 如果特定于每一行的复选框条件发生变化 我需要 js 或 jque
  • 将 HTML 表格导出到 Excel

    我在 ASP NET MVC 视图页面上有 HTML 表 现在我必须将该表导出到 Excel 1 我使用部分视图 Inquiries ascx 来显示数据库中的表数据 使用LINQ to Entity 2 我还使用了 UITableFilt

随机推荐