程序员经验分享-hwhale

Bootstrap 滑动选项卡（不是选项卡内容）

2023-12-05

我正在开发一个项目并使用 Bootstrap Tabs 作为我的选项卡。用户可以创建新选项卡，因此问题是：超过N选项卡（其中N取决于浏览器的宽度）导致此行为：

Tabs

我浏览了一下 Bootstrap HTML 选项卡代码，选项卡是li里面的元素ul。我想实现这样的目标：

Tabs goal

因此，在右侧（和左侧）选项卡组件可能有一个按钮，让我的用户可以在创建的选项卡之间导航（如滑块）。

有人可以指导我实现这个目标吗？或者是默认实现此行为的任何其他选项卡组件（例如来自其他框架的）？

提前致谢！


Bootstrap OOTB 中没有任何内容，但您可以执行以下操作：http://codeply.com/go/43ARTwZuie, or https://www.codeply.com/go/Loo3CqsA7T (引导程序 4.3.x)

该解决方案使用 jQuery 检查选​​项卡容器中的宽度，然后相应地调整选项卡的位置。

另一种选择是将溢出的选项卡放入下拉列表中，如下所示：http://www.bootply.com/7oAli9A9zL#

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

jQuery

css

twitterbootstrap

tabs

Bootstrap 滑动选项卡（不是选项卡内容） 的相关文章

  • 我可以在 CSS 类名中使用驼峰命名法吗

    我想命名一个 CSS 类并调用它imgSuper 我可以在 CSS 类中使用驼峰命名法吗 从技术上讲是可以的 但这是有风险的 因为虽然 CSS 语法大多不区分大小写 但在某些浏览器中 在某些条件下 类名被视为区分大小写 因为规范没有指定浏览

  • JQuery hide() 和 fadeOut() 、 show() 和 fadeIn() 之间的区别

    我是 jQuery 新手 目前 我正在我的跨平台移动应用程序之一中使用 jQuery 我需要根据各自的条件隐藏和显示我的一些页面内容 我发现以下两种方法对我来说效果很好 myControlId fadeOut myControlId hid

  • 如何同步两个文本框表单值？

    大家好 我是 jQuery 新手 假设我有两个 HTML 文本框 如何才能实现这样的情况 如果我在文本框 A 中写入 则相同的值会转到文本框 B 如果我在 B 中写入 则相同的值会转到 A 与删除文本相同 在 jQuery 中如何做到这一点

  • jquery.find() 可以只选择直接子项吗？

    我应该向 jQuery find 提供什么参数来选择元素子元素而不选择其他元素 我不能用 gt 引导选择器 而用 将选择所有后代 而不仅仅是直接子代 我知道 jQuery children 但这是一个库 因此用户能够提供自己的选择器 并且我

  • 解析“流”JSON

    我在浏览器中有一个网格 我想通过 JSON 将数据行发送到网格 但浏览器应该在接收到 JSON 时不断解析它 并在解析时将行添加到网格中 换句话说 在接收到整个 JSON 对象后 不应将行全部添加到网格中 应该在接收到行时将其添加到网格中

  • jqgrid删除：没有获取值

    我使用 JSP 和 Servlet IDE Eclipse 数据库 Oracle10 开发 Web 应用程序 我在用JQGRID以表格格式显示数据 我还想要添加 编辑 删除的功能JQGRID 到目前为止我已经完成了编辑功能 现在我想要Del

  • 使用 jQuery/JS 打开时使
    标签的内容具有动画效果

    我只想要 HTML5 的内容details标记为 滑行 动画打开 而不是仅仅弹出打开 立即出现 这可以用 jQuery Javascript 实现吗 Fiddle http jsfiddle net 9h4Hq HTML

  • 如何在 jQuery 中获取 ul 列表中 li 的第一个 href 链接

    我有以下清单 ul class tabs li a href testlink php First link a li li a href testlink2 php Second link a li ul 我想获取第一个链接的 href

  • 如何监听 jQuery AJAX 请求？

    以下两种实现 ajaxRequest 1 2 的方法应该是等效的 话说回来 为什么验证回调已执行的单元测试 3 在 1 中成功而在 2 中失败 我应该如何重写测试 3 来监视 2 中的成功回调 如果我尝试stub jQuery ajax使用

  • jQuery 可以在用户输入数字时添加逗号吗？

    当用户输入数字时 如何动态添加逗号 有没有一个好的数字格式化程序可以提供帮助 我必须稍后添加这些数字 所以我最终必须删除一行中的逗号 但屏幕需要显示逗号以提高可读性 运行代码片段以查看其工作情况 input number keyup fun

  • 如何以编程方式处理 JqGrid 事件？

    我正在使用JqG rid 的 ASP NET 包装器 http www trirand net demoaspnet aspx 我想以编程方式连接一些网格的处理程序events http www trirand com jqgridwiki

  • Eclipse 选项卡宽度不变

    我浏览了一些与此相关的帖子 但它们似乎并不能帮助我解决我的问题 我有一个项目 其中 java 文件以 2 个空格的宽度缩进 我想将所有内容更改为 4 空格宽度 我尝试了 正确的缩进 选项 但当我将几行修改为 4 空格缩进时 它只是将所有内容

  • 表单计算器脚本基本价格未加载 OnLoad

    我的表单中有一个计算器来计算我的下拉选项选择 function select calculate on change calc input type checkbox calculate on click calc function cal

  • 如何阻止破折号自行包裹？

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

  • 如何在jquery中以相反的顺序迭代元素？ [复制]

    这个问题在这里已经有答案了 我是jquery的新手 我想知道如何使用each 在jquery中以相反的顺序迭代表单元素 任何帮助 将不胜感激 尝试这个 input get reverse each function

  • 如何仅在最后一个
  • 处给出透明六边形角度？

    • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png

  • Spring Rest 和 Jsonp

    我正在尝试让我的 Spring Rest 控制器返回jsonp但我没有快乐 如果我想返回 json 但我有返回的要求 完全相同的代码可以正常工作jsonp我添加了一个转换器 我在网上找到了用于执行 jsonp 转换的源代码 我正在使用 Sp

  • 如何从图像输入中获取 xy 坐标？

    我有一个输入设置为图像类型

  • CSS 是否有不等于选择器？

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如

  • FireFox 中的“contenteditable = true”高度问题

    当有空的时候div with contenteditable true CSS contenteditable true border 1px dashed dedede padding 3px HTML div div 在 IE 和 Ch

随机推荐

  • 如何为采用泛型参数的泛型函数调用 GetMethod（不使用 GetMethods）？

    我知道我可以使用获取方法信息GetMethods 但我想知道如何正确地做到这一点而不GetMethods 我读过其他 SO 问题和答案 这些问题和答案表明这是不可能的 或者建议只使用 LINQ 但这并不是问题的真正答案 从最基本的层面考虑

  • NGINX 在 HTML 文件中执行嵌入的 PHP [重复]

    这个问题在这里已经有答案了 我有以下配置 server listen 80 default server access log var www logs access log error log var www logs error log

  • Android 服务无限期运行

    我注意到像 Skype 这样的应用程序使用的服务基本上是 24x7 运行 根本不会被杀死 您甚至无法使用任务杀手手动杀死它 您可以通过运行服务并杀死服务来杀死它们 这是如何实施的 我发现在 Android 2 3 中 我的服务在运行一段时间

  • 带有隐藏 UIView 的自动布局？

    我觉得这是一个相当常见的显示 隐藏范例UIViews 最经常UILabels 取决于业务逻辑 我的问题是 使用 AutoLayout 响应隐藏视图的最佳方法是什么 就好像它们的框架是 0x0 一样 以下是包含 1 3 个功能的动态列表的示例

  • vbscript 下载文件（绕过无效证书错误）

    dim xHttp Set xHttp createobject microsoft xmlhttp dim bStrm Set bStrm createobject Adodb Stream xHttp Open GET https ww

  • 从 R 中的 POSIXct 中提取 2 位数小时

    我想从a中提取小时POSIXctR 中的时间 但检索 2 位数答案 例如 test as POSIXct 2015 03 02 03 15 00 test 1 2015 01 02 03 15 00 GMT month testing 1

  • Java：调用超级方法，该方法调用被重写的方法

    public class SuperClass public void method1 System out println superclass method1 this method2 public void method2 Syste

  • 如何使用OpenCV2.0和Python2.6调整图像大小

    我想使用OpenCV2 0和Python2 6来显示调整大小的图像 我使用并采用了this示例 但不幸的是 此代码适用于 OpenCV2 1 似乎不适用于 2 0 这是我的代码 import os glob import cv ulpath

  • 如何在 jQuery 中使用 dataType 'text' 进行跨域 ajax？

    在我的 javascript 函数中 我称之为 ajax 它工作正常 但只有当我访问网页时firebird服务器 我的电脑上有相同的代码testing服务器 ajax 要求下载一些文件 但只有 firebird 服务器有其 ip 向我们的客

  • 在unix下同步四个shell脚本依次运行

    我有 4 个 shell 脚本来生成一个文件 假设是 param txt 该文件由另一个工具 informatica 使用 并且当该工具完成处理时 它会删除 param txt 这里的目的是所有四个脚本都可以在不同的时间调用 比如上午 12

  • 注意：PHP 中未初始化的字符串偏移量

    嗨 我有这个函数 它返回一个通知 注意 未初始化的字符串偏移量 function generaterandomkey length string characters 0123456789abcdef for p 0 p lt length

  • 如何创建右上角带有完成按钮的 UIKeyboard？

    我需要展示UIKeyboard右上角有 完成 按钮 请查看附图 任何帮助将不胜感激 这可能对你有帮助 请检查一下BS键盘控制

  • C# 自定义组合框排序

    是否可以在组合框中自定义排序 显示顺序 假设我在所有其他值之前想要一个特殊值 MasterValue 不要添加字符串 而是创建一个实现 IComparable 并重写 ToString 的类 将该类的实例添加到您的 ComboBox

  • 将 SMS api 与 woocommerce 集成，不发送消息

    我正在将 SMS API 与 WooCommerce 集成 以便每当在现场进行任何购买时都会向客户的手机发送自动订单更新 下面是我的代码 add action woocommerce payment complete custom proc

  • 如何使用宏将数字格式化为文件名中至少有 5 位数字？

    我正在开发一个宏 其中涉及生成文件名并将 Excel 工作表保存为具有该名称的 pdf 我能够生成目标文件夹名称 如下所示 user name Environ UserName file dir C Users user name Docu

  • 为什么 JSON.parse 会因空字符串而失败？ [复制]

    这个问题在这里已经有答案了 为什么 JSON parse 产生错误 Uncaught SyntaxError Unexpected end of input 如果直接返回不是更符合逻辑吗null 编辑 这不是链接问题的重复 虽然最小有效 j

  • Perl 正则表达式：剪切和粘贴

    我正在尝试使用 perl 编辑文件 本质上是剪切和粘贴文件中的内容 但是 看来我错误地构建了正则表达式 我很乐意帮助解决它 替换命令shouldcut 剪切之后的内容export PATH PATH直到但是not包括 THIS IS LAS

  • R - 多个嵌套循环

    我正在尝试编写一个嵌套循环代码来模拟 101 行数据框中的 10 列数据 第一行数据已被指定为起始值 每列应该不同 因为我的矩阵 r 是从随机法线生成的 但是 每列中的结果值完全相同 为循环索引提供一些上下文 tmax 100 ncol p

  • 在 Windows 8 上使用 gem 安装 SASS

    我尝试在 Windows 8 x64 上安装 SASS 但即使防火墙已关闭 仍然出现错误 我发出这个命令 C Ruby200 x64 bin gt gem install sass or C Ruby200 x64 bin gt ruby

  • Bootstrap 滑动选项卡（不是选项卡内容）

    我正在开发一个项目并使用 Bootstrap Tabs 作为我的选项卡 用户可以创建新选项卡 因此问题是 超过N选项卡 其中N取决于浏览器的宽度 导致此行为 我浏览了一下 Bootstrap HTML 选项卡代码 选项卡是li里面的元素ul

热门标签