Twitter Bootstrap Affix 侧边栏溢出 [关闭]

2024-01-12

我正在尝试使用 twitter bootstrap 的 Affix 插件,但我不知道如何将其限制在父容器中,我创建了以下示例来显示我的问题:

问题演示:http://www.codeply.com/go/DvcRXkeFZa http://www.codeply.com/go/DvcRXkeFZa

<div class="container">
    <div class="row">
        <div class="col-md-3 column">
            <ul id="sidebar" class="well nav nav-stacked" data-spy="affix" data-offset-top="130">
                <li><a href="#software"><b>Software</b></a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="#benefits">Benefits</a></li>
                <li><a href="#costs">Costs</a></li>
            </ul>
        </div>
        <div class="col-md-9 column">
            <h1>Blah, blah, blah</h1>
            <hr>
            <a class="anchor3" id="top" name="software"></a>
            <p>
             content here that scrolls...
            </p>
        </div>
    </div>
</div>

正如您所看到的,当您滚动时它会溢出侧边栏,但当它到达底部时它也不会固定到页面底部。


来自 Bootstrap 文档 (http://getbootstrap.com/2.3.2/javascript.html#affix http://getbootstrap.com/2.3.2/javascript.html#affix)..

小心!您必须管理固定元素的位置和 其直接父级的行为。位置由词缀控制, 顶部附加和底部附加。请记住检查潜在的 当词缀启动时,它会从其中删除内容,从而折叠父级 页面的正常流程。

所以你需要一些CSSaffix当元素固定时设置元素的宽度。例如:

#sidebar.affix {
    position: fixed;
    top: 0;
    width:225px;
  }

Bootply 上的演示:http://bootply.com/73864 http://bootply.com/73864

Bootstrap Affix 的相关回答:
如何使用 Bootstrap 3 创建粘性左侧边栏菜单? https://stackoverflow.com/questions/19681895/how-to-create-a-sticky-left-sidebar-menu-using-bootstrap-3/21497753#21497753
Twitter-bootstrap 3 在调整窗口大小以及页脚时固定侧边栏重叠内容 https://stackoverflow.com/questions/21028843/twitter-bootstrap-3-affixed-sidebar-overlapping-content-when-window-resized-and/21029328#21029328

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

Twitter Bootstrap Affix 侧边栏溢出 [关闭] 的相关文章

  • Chrome 中的 CSS 列不平衡

    我想使用以下方法在多列中动态显示一些 Bootstrap 列表组CSS 列 https developer mozilla org en US docs Web Guide CSS Using multi column layouts 但我
  • 使用 grunt 编译具有不同变量的 LESS

    我有基于 Bootstrap 的 HTML 模板 有不同的颜色 红色 绿色等 颜色正在改变使用 brand变量在variables less 现在我转到这个文件 更改变量 编译 less 文件 进入已编译的 css 文件目录并重命名 CSS
  • JQuery 使用 Bootstrap 4 验证表单输入并突出显示标签[重复]

    这个问题在这里已经有答案了 我已读过 我已读过带有 jQ uery 验证插件的 Bootstrap https stackoverflow com questions 18754020 bootstrap with jquery valid
  • 上/下箭头键与预输入控件的问题(角度引导 UI)

    检查这个PLNKR http plnkr co edit grrAxz158PTShzpxz2f0 我已经实现了预先输入控制 默认情况下 在类型提前控件中 他们不会设置任何最大高度或列表高度 但根据要求 我必须将列表高度固定为 110px
  • 如何左对齐 Bootstrap 3 下拉菜单?

    在上图中 MenuItems 与 MyMenu 的右侧对齐 我需要将 MyMenu 的 MenuItems 左对齐 我的意思是它必须与 MyMenu 的左边缘对齐 我尝试使用 pull left 和 pull right 类 例如 ul c
  • Bootstrap 响应式图像缩放

    Using Twitter Bootstrap我意识到默认情况下它会响应式地缩放图像 这很棒 但并不总是完美的 比如说我有一个500x300桌面上的图像 然后它会针对移动设备调整大小 该图像将非常小而且不是很高 会丢失图像的大部分细节部分
  • 如何使 Twitter bootstrap 模式全屏

    div class modal hide fade div class modal body div div 如何为上面的代码制作一个 Twitter 引导模式弹出全屏 我尝试使用 css 但无法按照我想要的方式得到它 任何人都可以帮我吗
  • 如何使用 jQuery AJAX 和 JSON 通过 Bootbox 确认表单提交

    我正在使用一个网络应用程序工作Spring MVC 我试图在提交表单之前显示一个确认对话框Bootbox 但我收到 500 内部服务器错误 这是我的表格
  • 无论滚动位置如何,引导模式都位于 iframe 顶部。如何将其放置在屏幕上?

    在 iframe 中嵌入 Bootstrap 应用程序时 模式对话框始终在 iframe 顶部打开 而不是在屏幕顶部 例如 转到http getbootstrap com javascript http getbootstrap com j
  • Morris.js 图表在引导选项卡内无法工作

    我遇到一种情况 我尝试在两个不同的内部使用 MorrisJS 图表引导选项卡 http getbootstrap com javascript tabs 图表在第一个 默认 选项卡中加载良好 但当我单击第二个选项卡时 图表根本无法正确加载
  • 为什么 React 会删除我的类名?

    我正在学习 Reactjs 并且正在使用一些组件渲染一个简单的页面 该组件之一是 class Header extends React Component render return
  • 在 Symfony 2 项目中安装 Bootstrap 主题

    我正在考虑安装这个主题 http bootswatch com superhero 在我的SF2项目中 我注意到页面顶部有4个文件可供下载 即 bootstrap min css 引导程序 css 无变量 bootswatch less 我
  • 使用小屏幕时强制在按钮文本内换行

    我有一个响应式网络应用程序 其中包含一些对于小移动屏幕来说太大的按钮 它们包含太多文字 因此最终会从屏幕上消失 我目前正在使用a通过给它们引导类来标记为按钮 所以目前的代码是这样的 a Here I have a button with l
  • Bootstrap 4 中导航栏重叠内容

    我的作品集页面有一个粘性导航栏 但是当我单击导航栏链接时 它会与每个部分中的文本重叠 在大约中 它与文本重叠 在 投资组合 和 关于 中 它与两个图块重叠 我试图在每个部分用一些填充顶部来补偿 但无济于事 这是完整的导航栏
  • 取消滚动 Twitter 引导程序的词缀

    我在传统网站布局的侧边栏上使用 Twitter bootstrap 的后缀 页眉 内容和侧边栏 页脚 在某个滚动点上 我希望它从页面上取消固定并返回到其原始位置 静态 因此它不会与页脚重叠 我试图只用 CSS 来摆弄它 但是由于 affix
  • Bootstrap 字形未显示在表单中

    我正在尝试不同的方法来制作带有确认的表格 我有以下形式以及一个超链接 下面的超链接正确显示字形 但表单内的提交按钮仅在灰色按钮中显示为 提交 提交按钮和超链接的 CSS 是否需要不同 div class text center using
  • ASP.NET MVC,Bootstrap Tables,获取每列的值

    在 ASP NET MVC 中 我有一个操作 它接受有关行和列的用户输入 然后导航到根据用户输入生成所需行数和列数的操作 如下所示 Views div class container style width 1px div class ro
  • 可以将position:absolute元素设为粘性吗?

    In CSS position sticky使元素能够显示position static行为 即 它采用文档流中的默认位置 直到到达某个滚动位置 然后采用position fixed行为 那么 这是否意味着我们不能使用position st
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • Bootstrap 折叠导航菜单

    我正在尝试使用 Bootstrap 折叠插件 但收效甚微 我想要一个带有隐藏子菜单的手风琴式导航菜单 我的 HTML 和 JS ul class nav nav list li class nav header span Home span

随机推荐

  • 原因:com.android.dex.DexException:多个dex文件在Studio 3.0中定义Lorg/apache/commons/io/IOCase

    我正在开发一个项目 这在 Android studio 2 3 3 上工作得很好 但是当我更新我的安卓工作室3 0 https developer android com studio index html并打开我的项目 然后它无法组装 并
  • 如何对仅客户端(本地)Meteor 集合进行排序

    我只有客户端 本地 Meteor 集合定义如下 coffeescript 产品 new Meteor Collection null 然而 当我尝试 find 提供排序参数时 Meteor 告诉我不支持本地集合的排序 这是可以理解的 我想知
  • 结合group by和count mysql

    我需要使用 group by 找出表中的所有状态 SELECT status FROM table GROUP BY status 然后统计找到的结果 SELECT count id WHERE status STATUS 所以像这样的表
  • 抑制 ddl 创建脚本中的 ORA-00942 错误

    假设您生成 ddl 以通过 Hibernate SchemaExport 等创建所有数据库表等 您得到的是一个开头以 drop 语句开头的脚本 没问题 因为我想要这个 但运行此脚本会在 Oracle 数据库上运行时产生大量 ORA 0094
  • 理解OpenCV的unactor函数

    我希望使用为相机计算的畸变系数来消除图像畸变 而不更改相机矩阵 这正是undistort 确实如此 但我想将输出绘制到更大的画布图像上 当我尝试这个时 Mat drawtransform getOptimalNewCameraMatrix
  • 为什么使用 Intranet 站点的兼容模式

    我是一名 Mac 用户 网页设计师 试图了解 IE 11 的 以兼容模式显示 Intranet 站点 选项 我有一个客户 一家建筑公司 曾经在他们的 Windows 服务器上托管他们的旧网站 我没有开发的 HTML 网站 我最近为他们启动的
  • 找不到名为“MainStoryboard_iPad”的故事板

    我无法在模拟器中运行我的项目 因为我收到此错误 找不到名为 MainStoryboard iPad 的故事板 但故事板就在那里 谢谢 我通过以下步骤在我的 iPad 应用程序中成功解决了这个问题 检查构建阶段 编辑 Info plist 文
  • C# 最快的 2 组排序值并集

    合并两组排序值的最快方法是什么 速度 big O 在这里很重要 不清楚 假设这已经被执行了数百万次 假设您不知道值的类型或范围 但有一个有效的方法IComparer
  • 获取变量(非硬编码)名称?

    我正在寻找一种检索变量名称的方法 因此我不必在需要时使用硬编码声明 对于属性名称等 我几乎不相信这是可能的 也许有人有解决方案 注意 即使不是变量 属性也会移动 Pseudo Module Module1 Sub Main Dim vari
  • Javascript:全局元素焦点监听器

    我正在尝试设置一个侦听器来侦听所有焦点事件 特别是 我试图监听输入或文本框获得焦点的任何时间 根据一些研究 广泛接受的实现这一目标的方法是这样的 document body onfocus function event Check the
  • Elasticsearch 错误“无法在路径下找到嵌套对象”

    我知道这个问题之前已经被问过多次 但现有的问题或答案都没有帮助我 查询 Elasticsearch 时出现以下错误 nested 未能在路径 出发 下找到嵌套对象 我正在运行的查询如下 explain true from 0 query n
  • 恢复 iPhone 上已购买的应用内购买项目?

    到目前为止 我得到的是 重新安装后 用户需要单击 购买功能 然后他对 0 99 美元的问题感到害怕 然后必须登录 然后被告知该功能已经购买 他可以免费获得 我知道苹果是一种宗教 用户也是坚定的信徒 但是有没有更好的方法呢 我想要的是检查该功
  • 处理 Windows 应用程序的结束进程

    是否可以在同一个 Windows 应用程序本身中捕获 Windows 应用程序的任务管理器结束进程 我正在使用 C 2 0 win 应用程序 当结束进程发生时 我想进行一些数据库处理 将数据库中的标志从 Y 更改为 N 不 不可能挂钩操作系
  • 通过引用传递匿名变量

    标准 C 类型 例如 int 或 char 具有构造函数 因此您可以使用如下表达式 int a int 67 create anonymous variable and assing it to variable a int b 13 in
  • XMLHttpRequest 对象的 open 方法的相对路径

    在包含 Ajax 请求的 JavaScript 文件中 URL 与什么相关 我有包含目录 alpha 和 bravo 的 www 目录 alpha 中的 JavaScript 文件 包含它的 HTML 文件以及 bravo 中处理请求的 P
  • C# 中匹配换行符 (\n) 的正则表达式

    好吧 这个让我抓狂 我有一个这样形成的字符串 var newContent string Format 0 n 1 stripped content reply newContent 将显示如下 旧文本 新文本 我需要一个正则表达式来去除括
  • 如何使 WebKit WebView 使用 CSS 样式表?

    我制作了一个带有 CSS 文件链接的 html 在浏览器中打开它 样式显示正确 然后我将其加载到 WebView 中 但样式不显示 我什至尝试插入一个从 Objective C 到 DOM 这是我的最终目标 但都没有成功 我是否必须以某种方
  • 收到以下警告:使用灵活数组成员传递结构的 ABI 在 GCC 4.4 中已更改

    当我尝试运行我的程序时 我收到此警告和一些奇怪的错误 rmi pdu以下结构中包含一个我想要访问的可变大小的数组 struct rmi message s Queue element containing Rmi message struc
  • 在 Wildfly 中使用 Jackson 注释

    我正在努力让 Jackson Annotations 在我的项目中工作 该项目部署在 Wildfly 中 我已经尝试过了实现 MessageBodyWriter https stackoverflow com questions 21395
  • Twitter Bootstrap Affix 侧边栏溢出 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在尝试使用 twitter bootstrap 的 Affix 插件 但我不知道如何将其限制在父容