问题标签 [nav-pills]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
298 浏览

css - 如何使用链接更改导航链接药丸?

我有这个 Bootstrap Nav-pills - 有 2 个标签:

在 TAB2 内我有一个按钮,我需要更改为 TAB1 onclick。这是可能的?

我试试这个:

打开 TAB1 - 但是.. 不活动 tab1 (“活动边框”仍在 tab2 上) - 当我返回 Tab2 时 - 不再工作了..

任何想法?

0 投票
3 回答
56 浏览

html - 如何纠正药丸中的重叠文本

https://jsbin.com/dizixeg/edit?output

我已经使用 SnappySnippet 快速将 HTML/CSS 复制到了jsBin

我试过做,没有用。最好的可以为我工作overflow:ellipses

  1. word-break:断词;
  2. 断词:打破一切;
  3. 空白:pre;
  4. 文本溢出:省略号;

这是我的代码

0 投票
4 回答
180 浏览

css - Ng-Bootstrap 活性药丸添加下拉不显示

我将我的 Angular-6 项目用于ng-bootstrap并且我使用了 ngbootstrap-pills,我尝试将活动药丸添加到带有删除按钮选项的下拉图标中,但它不起作用,任何人都知道如何正确地做到这一点。

这里有堆栈闪电战代码

这是我的 .css 代码

我试着像这张图片一样

我试着像这张图片一样

谢谢。

0 投票
2 回答
361 浏览

css - 使用 Bootstrap 4 在大屏幕上的 nav-pills 和小屏幕上的 navbar-nav 之间切换

我喜欢大屏幕上的导航药丸的外观,但是一旦显示折叠按钮,我希望该菜单可以堆叠并且看起来像附加的图像而不是药丸。我需要自定义 CSS 来实现这一点吗?

想要在较小的屏幕上使用

导航栏-Nav

想要在更大的屏幕上使用这些药丸,而不是更小的屏幕

仅导航药片

0 投票
1 回答
2962 浏览

html - 如何水平滚动导航药丸(Bootstrap 3)?

我正在将新的 Bootstrap 3 用于导航药丸,我想让所有药丸都保持在一条可以滚动的水平线上(没有换行,即使在每个药丸的标题中)。即使是 3 粒药丸,因为我正在尝试将其用于小屏幕。像智能手机。

我尝试了一些解决方案:
Scroll Bootstrap 4 nav-tabs
Horizo​​ntally Bootstrap Horizo​​ntal scrollable tab bar

但我无法弥补。您可以在我的网站页面中看到我的问题:

https://karneta.com/downloads/how-to-create-an-audience-persona/

请帮忙解决这个问题。

HTML

CSS

0 投票
1 回答
328 浏览

html - 引导选项卡药丸不能以相反的顺序工作

我用 Bootstrap 4 药片创建了一个布局。它在第一次单击时工作正常,第二次则无法正常工作。假设如果我们在一个序列上单击 menu1、menu2、menu3 - 选项卡内容正在加载,如果我再次单击 menu1 - 选项卡内容没有改变。我犯了一些错误,但我对实现这种情况有点困惑。我想要如下所示的设计。

任何人都可以纠正我的错误,这对我有很大帮助。在此先感谢,以下是我的片段,请在完整窗口中查看我的结果以检查我的布局设计

0 投票
1 回答
187 浏览

jquery - jQuery 在时间戳后单击来自 nav-pills 的下一个锚标记

我正在尝试使用 jquery 单击下一个导航链接。我正在使用带有 Jquery 3.4.1 的 Bootstrap 4。我正在使用 Vertical Nav Pills,我想在一段时间后激活它。

jQuery

我不确定为什么它不起作用。请协助。

0 投票
0 回答
13 浏览

css - 使用 Drupal Bootstrap 是否可以允许某些用户查看药丸但不允许其他用户查看药片?

在我正在处理的网站中,客户想要另一个菜单,主导航菜单下有多个下拉菜单。

我没有使用与 Drupal 的 Bootstrap 主题相关的典型菜单功能,而是使用了药丸。

是否可以让某些用户查看这些药丸但其他用户不能查看?我知道可以使用页面这样做。

我让每个用户都有自己的页面,只有他们可以看到。

理想情况下,我希望每个用户都能看到一个“我的个人资料”药丸(或菜单,或按钮,任何有效的),将他们引导到自己的页面。

我遇到的问题是,在药丸下拉菜单中,他们还可以看到其他人指向他们页面的链接,即使当他们点击它时,他们也无法访问其他用户的页面。

此外,我已经尝试了与 Bootstrap 主题中已内置的主导航菜单相同的操作,但它不适用于药丸。

我似乎也找不到任何引用它的代码。

0 投票
0 回答
112 浏览

html - 使用包含页面激活的 Bootstrap 4 nav-pills

我正在为我工​​作的公司开发一个内部网站,我的经理希望我将菜单作为 jsp 包含页面,而不是像这样将其编码到页面中(可行)。

他希望它看起来更像这样。

这是 TestMenu.jsp

我的导航药片会启动,但它们不会将我带到实际页面。但是,如果我从 TestMenu 中删除活动,则链接将起作用。这是我试图完成的一件小事,它突出了正确的药丸,我只需要帮助弄清楚它。或者至少指出我正确的方向。

选择了错误的药片标签

即使我在 2020 年公司日历页面中,它也会突出显示项目团队指南。

0 投票
1 回答
148 浏览

css - 自定义 CSS:更改 Active Pill 导航颜色

我有药丸标签,其中每种颜色都是#d7e5ea。我想将所选药丸选项卡(活动药丸选项卡)的颜色更改为#83a8b5,而非活动(未选中)保持在#d7e5ea。

我可以申请什么自定义 css 来进行此更改?我之前尝试过更改背景颜色。