Tag: bootstrap 4

使用Bootstrap在图标旁边显示popover

我有一个来自bootstrap的信息图标： 我有一个popover： Wat is een snippet? X Moderne e-mailorigramma’s tonen behalve het subject van de mail(het onderwerp) ook een extra informatieregel. Zo wordt de context van de mail sneller duidelijk als een gebruiker zijn inbox ‘scant’. Deze tekst wordt ‘snippet’ genoemd en is aanpasbaar op deze pagina. 以下是用于显示popover的jQuery： $(document).ready(function () { $(“.watiseenSnippetButton”).click(function () { $(‘#SnippetTonen’).modal(‘show’); […]

当鼠标移动缓慢时，Bootstrap 4中的菜单消失

我正在运行这个小提琴 ，当鼠标指针从START快速移动到展开的菜单时，一切都很好。 但是，当运动较慢时，菜单会关闭，因为它感觉就像鼠标左侧。 const menu = $(“li.dropdown”); menu.on(“mouseenter mouseleave”, () => { menu.toggleClass(“open”); }); 最初，我试图使列表项控制更高但很快意识到菜单将在它下面打开（加上这个不幸的垂直距离）。 我该怎么办？ 显然Bootstrap创建者出于某种原因发现了这个好处（或者没有考虑鼠标移动而是点击）。 我可能以不恰当的方式设置hover事件吗？

JQuery事件是否可以与Dom addEventListener一起使用？

我在我的项目中使用Bootstrap4 alpha，出于某些调查目的，我正在尝试使用DOM addEventListener()捕获JQuery事件。 该事件是使用JQuery $(“#mypanel”).trigger(“shown.bs.collapse”)函数通过bootstrap在其崩溃组件中$(“#mypanel”).trigger(“shown.bs.collapse”)的。 如果我尝试使用JQuery $(“#mypanel”).on(“shown.bs.collapse”, … )函数捕获它，一切正常。 但是如果我在相应的DOM元素上使用$(“#mypanel”).get(0).addEventListener(“shown.bs.collapse”, … ) ，则事件不会被“捕获” JQuery事件系统和标准DOM事件系统是不是兼容吗？ 让我觉得它们实际上是不兼容的一件事是，如果我使用chrome monitorEvents()函数来跟踪“shown.bs.collapse”事件，它就不会出现。 欢迎提出任何反馈！ 非常感谢 ！ 克莱门特

Bootstrap 4 activate.bs.scrollspy事件未触发

我正在使用Bootstrap v4.0.0 我已经包含了必要的JavaScript文件（jQuery，popper和Bootstrap）以及必要的CSS文件。 这是HTML： One Two Content. More content. $(function() { // As per the official docs: // https://getbootstrap.com/docs/4.0/components/scrollspy/#events $(‘[data-spy=”scroll”]’).on(‘activate.bs.scrollspy’, function() { console.log(“This event is not firing…”); }); }); 滚动时菜单项会正确突出显示，但JavaScript事件activate.bs.scrollspy未触发。 我也尝试将事件挂钩到navbar本身，但它也不会触发： $(‘#my-navbar-collapse’).on(‘activate.bs.scrollspy’, function () { console.log(“Not firing either…”); }) 我曾经在Bootstrap 3中使用这个代码并且工作得很好。 有什么想法吗？ 谢谢。

Bootstrap 4移动导航栏从左侧滑动

我正在使用最新版本的bootstrap。 我自己尝试了各种各样的东西，之后我想我可能会在stackoverflow上找到一些东西。 但善良并没有得到这个东西。 我的意思是它如何运作？ 这是我的代码。 我不会在这里添加任何自定义样式，因为它们并没有真正起作用，反而他们创建了一些错误。 我还检查了这篇文章也Bootstrap – 如何从左边而不是从顶部滑动导航栏我尝试了所有的答案，但它不适合我。 Roknil Style Home Link About Search

jQuery – “fadeIn不是函数”

遇到一个非常奇怪的问题。 试图运行fadeIn()但我收到错误“.fadeIn不是一个函数”。 我的代码： body { display:none; } Test $(document).ready(function(){ $(‘body’).fadeIn(); }) 错误信息： “TypeError: $(‘body’).fadeIn is not a function. (In ‘$(‘body’).fadeIn()’, ‘$(‘body’).fadeIn’ is undefined)” 使用Bootstrap v4 beta，在Chrome和Safari上进行本地测试。

使用jQuery在Bootstrap 4中过滤卡片

我正在尝试使用bootstrap 4的新卡组件创建一个由许多卡填充的页面。 我想创建一个搜索栏，搜索时会筛选出标题与搜索查询不匹配的卡片。 这是我想到的东西。 Plunker 我希望这些卡片能够display: none一个display: none ，或opacity:0如果它们不匹配。 我目前正在尝试编写一个函数，搜索栏的onChange执行此操作。 我会发布，如果我能弄明白的话。 我也试过使用内置代码段function。 Card title that wraps to a new line This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a […]

如何停止滚动比div高度更长的div？

我有图像，对齐到右侧，位置固定，大文本内容与左侧对齐。 如何在右侧执行图像和文本内容应该只能使用bootstrap滚动。 在这里我的代码。 感谢您的时间和建议 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora […]

Bootstrap 4：为什么在可滚动下拉列表中弹出窗口没有显示？

我想让它像Bootstrap 3一样工作。当我在hover弹出窗口上有一个带滚动条的下拉列表时，我认为Bootstrap 4有问题。我需要溢出：隐藏; 制作下拉滚动，但也隐藏了弹出窗口。 我试图使用container:’body’但它没有用。 $(document).ready(function() { $(‘[data-toggle=”popover”]’).popover({ html: true, container: ‘body’ }); }); .dropdown-menu{ height: 150px; overflow: hidden; overflow-y: auto } Bootstrap Example Dropdowns Dropdown button Link 1 Link 2 Link 3 Link 4 Link 5 Link 6 Link 7 Link 8 Link 9

Bootstrap 4导航栏下拉菜单项无法在移动设备上单击

我有一个使用Bootstrap 4开发的网站。当从移动设备查看并且菜单项已折叠到3个条形时，菜单项不可点击。 我试过像bootstrap docs建议的那样实现它，但它仍然没有用。 我尝试过其他一些调整无济于事。 我在这里做错了什么（除了使用alpha版本）？ 这是您可以测试它的网站： http ： //www.wrestlestat.com 请记住，如果您只是将浏览器从桌面调整到移动设备大小，一切正常，只有在从移动设备查看时才能正常工作。 这是导航菜单的代码： ☰ Donate Donate Teams Fantasy Pick’Em Tourney Pool Compare Dual Lineup Wrestlers Rankings Wrestlers 125 133 141 149 157 165 174 184 197 285 Dual Team Tournament Team Statistical Profile Login Register Forgot Password 这是一个bootply，但可能没有多大好处，因为它必须在移动设备上才能工作。 http://www.bootply.com/9Z9oycwCSh