twitter-bootstrap 相关问题

bootstrap表行悬停，除了某些行之外

bootstrap 4按钮组包装修复Border-Radius

我使用bootstrap 4.3.1如果有任何区别。 <div class="row mt-3"> <div class="col text-center"> <div id="alphabetGroup" class="btn-group flex-wrap" role="group"> <button id="btnHash" type="button" class="btn btn-outline-dark">#</button> <button id="btnA" type="button" class="btn btn-outline-dark">A</button> <button id="btnB" type="button" class="btn btn-outline-dark">B</button> <button id="btnC" type="button" class="btn btn-outline-dark">C</button> <button id="btnD" type="button" class="btn btn-outline-dark">D</button> <button id="btnE" type="button" class="btn btn-outline-dark">E</button> <button id="btnF" type="button" class="btn btn-outline-dark">F</button> <button id="btnG" type="button" class="btn btn-outline-dark">G</button> <button id="btnH" type="button" class="btn btn-outline-dark">H</button> <button id="btnI" type="button" class="btn btn-outline-dark">I</button> <button id="btnJ" type="button" class="btn btn-outline-dark">J</button> <button id="btnK" type="button" class="btn btn-outline-dark">K</button> <button id="btnL" type="button" class="btn btn-outline-dark">L</button> <button id="btnM" type="button" class="btn btn-outline-dark">M</button> <button id="btnN" type="button" class="btn btn-outline-dark">N</button> <button id="btnO" type="button" class="btn btn-outline-dark">O</button> <button id="btnP" type="button" class="btn btn-outline-dark">P</button> <button id="btnQ" type="button" class="btn btn-outline-dark">Q</button> <button id="btnR" type="button" class="btn btn-outline-dark">R</button> <button id="btnS" type="button" class="btn btn-outline-dark">S</button> <button id="btnT" type="button" class="btn btn-outline-dark">T</button> <button id="btnU" type="button" class="btn btn-outline-dark">U</button> <button id="btnV" type="button" class="btn btn-outline-dark">V</button> <button id="btnW" type="button" class="btn btn-outline-dark">W</button> <button id="btnX" type="button" class="btn btn-outline-dark">X</button> <button id="btnY" type="button" class="btn btn-outline-dark">Y</button> <button id="btnZ" type="button" class="btn btn-outline-dark">Z</button> </div> </div> </div> 当查看桌面或任何具有足够宽屏幕的设备时，看起来像这样： Alphabet按钮组 现在，当您进入较小的屏幕或移动设备时，它会包裹着，而是这样的： 包装按钮组 我对此的外观很好，但是我想改变一些东西： i可以使左上（第一个按钮）和底部右上方（最后一个按钮）具有适当的圆角，但是我该如何处理左下角和右上的按钮？根据窗口的宽度，按钮本身并不总是相同的，我不想强迫群体分裂（设置断点等多组等）。 您可以随身携带JSFIDDLE。由于某种原因，它不能像我自己的代码中那样证明按钮是合理的，但这并不重要 - 如果您使结果窗格变薄，则可以看到按钮组包装，左侧应用顶行证明是合理的。如果您可以使第一行具有边界底 - 拉迪乌斯（Left-Radius），那么也应该能够将类似的东西应用于右上。 https：//jsfiddle.net/cglatot/yu6w4rkv/1/ #alphabetGroup button:first-child { border-radius: 8px 0 0 8px; } #alphabetGroup button:last-child { border-radius: 0 8px 8px 0; } trone这样的东西.. trone停用BTN边框并使用溢出容器。 #alphabetGroup { border-radius: .25rem; overflow: hidden; .btn { border-radius: none; } } 取决于您愿意妥协的事情，您可能必须在边境上四处摆弄。我通常会给容器一个左上的边框，按钮的右侧为右侧。

将滚动栏添加到引导tokenfieldautocomplete

我找不到有关在Bootstrap的Tokenfield AutoComplete上启用滚动条的任何文档或疑问。 我的字段有很多用户形成Active Directory，因此我们必须拥有此卷轴。

可以根据设备屏幕尺寸关闭bootstrap工具提示？

？

如何在$ display-fort尺寸列表中添加更多尺寸？ （bootstrap）

如何使桌子中的项目对齐 我是在使用bootstrap制作响应表的过程中，并且某些项目在单元格的中心不排列，因为父行元素对某些单元格有多个线路。 所以我尝试应用Flex-Box

Flex-box

如何使用Bootstrap

TUTOIRALIT仅将样板上盖好。

如何使用Bootstrap

我一定很愚蠢，但是当单击Bootstrap侧边栏中的项目时，我真的不明白如何更新页面内容。我发现的所有示例都只是显示了如何创建响应式侧边栏但结束...

在野生动物园中无法单击/悬停在卡中的按钮菜单，而是在Firefox中工作

bootstrap将活动类添加到li

使用Twitter引导程序，我需要将活动类启动到主NAV的LI部分。自动。 我们使用PHP而非Ruby。 样本nav： 使用Twitter引导程序，我需要将活动类启动到主NAV的LI部分。自动。 我们使用php而非红宝石。 sample nav： <ul class="nav"> <li><a href="/">Home</a></li> <li><a href="/forums">Forums</a></li> <li><a href="/blog">Blog</a></li> <li><a href="/faqs.php">FAQ's</a></li> <li><a href="/item.php">Item</a></li> <li><a href="/create.php">Create</a></li> </ul> Bootstrap代码如下： <li class="active"><a href="/">Home</a></li> 因此，只需要弄清楚如何将活动的类附加到当前页面即可。在堆栈上几乎通过每个答案看上去都没有真正的喜悦。 我玩过的： /*menu handler*/ $(function(){ var url = window.location.pathname; var activePage = url.substring(url.lastIndexOf('/')+1); $('.nav li a').each(function(){ var currentPage = this.href.substring(this.href.lastIndexOf('/')+1); if (activePage == currentPage) { $(this).parent().addClass('active'); } }); }) 但没有欢乐 为Bootstrap 3： var url = window.location; // Will only work if string in href matches with location $('ul.nav a[href="'+ url +'"]').parent().addClass('active'); // Will also work for relative and absolute hrefs $('ul.nav a').filter(function() { return this.href == url; }).parent().addClass('active'); update 为Bootstrap 4： var url = window.location; // Will only work if string in href matches with location $('ul.navbar-nav a[href="'+ url +'"]').parent().addClass('active'); // Will also work for relative and absolute hrefs $('ul.navbar-nav a').filter(function() { return this.href == url; }).parent().addClass('active'); 我们最终设法解决了： /*menu handler*/ $(function(){ function stripTrailingSlash(str) { if(str.substr(-1) == '/') { return str.substr(0, str.length - 1); } return str; } var url = window.location.pathname; var activePage = stripTrailingSlash(url); $('.nav li a').each(function(){ var currentPage = stripTrailingSlash($(this).attr('href')); if (activePage == currentPage) { $(this).parent().addClass('active'); } }); }); 您真的不需要带有bootstrap的JavaScript： <ul class="nav"> <li><a data-target="#" data-toggle="pill" href="#accounts">Accounts</a></li> <li><a data-target="#" data-toggle="pill" href="#users">Users</a></li> </ul> 在选择菜单项之后，要执行更多任务，您需要JS，如此处的其他帖子所述。 希望这帮助 如果你放 data-toggle="pill" 在标签中应该自动工作。 http：//twitter.github.com/bootstrap/javascript.html#tabs 在标记下阅读 这为我完成了这项工作，包括主动的主要下拉列表和活跃的儿童（感谢422）： $(document).ready(function () { var url = window.location; // Will only work if string in href matches with location $('ul.nav a[href="' + url + '"]').parent().addClass('active'); // Will also work for relative and absolute hrefs $('ul.nav a').filter(function () { return this.href == url; }).parent().addClass('active').parent().parent().addClass('active'); }); 如果您使用的MVC框架与路线和操作： $(document).ready(function () { $('a[href="' + this.location.pathname + '"]').parent().addClass('active'); }); 在克里斯蒂安·兰德格伦（Christian Landgren）的答案中所述： https：//stackoverflow.com/a/13375529/101662 尝试这个。 // Remove active for all items. $('.page-sidebar-menu li').removeClass('active'); // highlight submenu item $('li a[href="' + this.location.pathname + '"]').parent().addClass('active'); // Highlight parent menu item. $('ul a[href="' + this.location.pathname + '"]').parents('li').addClass('active'); 这对我来说很好。它将简单的NAV元素和下拉导航元素标记为Active. $(document).ready(function () { var url = window.location; $('ul.nav a[href="' + this.location.pathname + '"]').parent().addClass('active'); $('ul.nav a').filter(function() { return this.href == url; }).parent().parent().parent().addClass('active'); }); 将this.location.pathname到$('ul.nav a[href="'...'"]')标记也简单的导航元素。通过url为我不工作。 如果您在Angulajs中使用Boostrap：这是一个对我有用的简单指令（因为KAM引用的数据与我不包含在Angular-UI中）。希望可以帮助 app.directive("myDataToggle", function(){ function link(scope, element, attrs) { var e = angular.element(element); e.on('click', function(){ e.parent().parent().children().removeClass('active'); e.parent().addClass("active"); }) } return { restrict: 'A', link: link }; }); <ul class="nav nav-sidebar"> <li><a href="#/page1" my-data-toggle>Page1</a></li> <li><a href="#/page2" my-data-toggle>Page2</a></li> <li><a href="#/page3" my-data-toggle>Page3</a></li> </ul> 解决方案很简单，不需要服务器端或AJAX，您只需要jQuery和bootstrap即可。在每个页面上，在id标签中添加一个body。使用该id查找包含页名的标签（标签的值）。 示例： Page1.html <body id="page1"> <ul class="nav navbar-nav"> <li><a href="page1.html">Page1</a></li> <li><a href="page2.html">Page2</a></li> </ul> <script src="script.js"></script> </body> -page2.html <body id="page2"> <ul class="nav navbar-nav"> <li><a href="page1.html">Page1</a></li> <li><a href="page2.html">Page2</a></li> </ul> <script src="script.js"></script> </body> Script.js <script> $(function () { $("#page1 a:contains('Page1')").parent().addClass('active'); $("#page2 a:contains('Page2')").parent().addClass('active'); }); </script> big感谢Ben！ Youtube 我有同样的问题，这就是我在应用启动脚本中添加的内容，并且运行顺利。这是JavaScript $(document).ready(function($){ var navs = $('nav > ul.nav'); // Add class .active to current link navs.find('a').each(function(){ var cUrl = String(window.location).split('?')[0]; if (cUrl.substr(cUrl.length - 1) === '#') { cUrl = cUrl.slice(0,-1); } if ($($(this))[0].href===cUrl) { $(this).addClass('active'); $(this).parents('ul').add(this).each(function(){ $(this).parent().addClass('open'); }); } }); }); 相应的HTML如下所示。我正在使用 -coreui，这是一种惊人的开源管理模板，并为许多前端框架提供了支持，例如Angular，Plain Bootstrap，Angular 4等。 <div class="sidebar"> <nav class="sidebar-nav open" > <ul class="nav" id="navTab" role="tablist"> <li class="nav-item"> <a class="nav-link" href="/summary"><i class="icon-speedometer"></i> Dashboard </a> </li> <li class="nav-item"> <a class="nav-link" href="/balanceSheet"><i class="icon-chart"></i> Balance Sheet </a> </li> <li class="divider"></li> <li class="nav-title border-bottom"> <p class="h5 mb-0"> <i class="icon-graph"></i> Assets </p> </li> </ul> </nav> </div> 在某些罕见的引导4：4： 为了将解决方案用于相对路径，例如： <ul class="navbar-nav nav-t"> <li class="nav-item"><a href="index.php" class="nav-link">Home</a></li> <li class="nav-item"><a href="about.php" class="nav-link">About</a></li> <li class="nav-item"><a href="blog.php" class="nav-link">Blog</a></li> <li class="nav-item"><a href="info.php" class="nav-link">Info</a></li> </ul> 然后您会发现：代码： if (activePage == currentPage) { $(this).parent().addClass('active'); } 活动页面返回整个URL，当前位置返回当前的HREF DOM元素值为filename.php。 为了解决此问题，只需添加一种方法来纠正以下方法，请稍微调整代码： //... other js/jquery code var activeMenuItemChanges=function () { function stripTrailingSlash(str) { if(str.substr(-1)=='/'){ return str.substr(0, str.length -1); } return str; } // for cases where we do not use full url but relative file names in the href of ul>li>a tags: function getRelativeFileName(str){ let page=str.substr(str.lastIndexOf('/')+1); if(page.length > 0){ return page; } return 'index'|'index.php'; } let url=window.location.pathname; let activeLocation=stripTrailingSlash(url); let activeFileName=getRelativeFileName(activeLocation); $('.nav-item a').each(function() { let currentLocation=stripTrailingSlash($(this).attr('href')); if(activeFileName==currentLocation){ $(this).parent().addClass('active'); } }); } activeMenuItemChanges(); //... other js/jquery code here是完整的Twitter引导程序示例，并基于查询字符串应用了活动类。 采取措施遵循以实现正确解决方案的步骤： 1）包括最新的jquery.js和bootstrap.js javascript文件。 2）包括最新的Bootstrap.css文件 3）包括querystring-0.9.0.js，用于在js.中获取查询字符串变量值 4）html： <div class="navbar"> <div class="navbar-inner"> <div class="container"> <ul class="nav"> <li class="active"> <a href="#?page=0"> Home </a> </li> <li> <a href="#?page=1"> Forums </a> </li> <li> <a href="#?page=2"> Blog </a> </li> <li> <a href="#?page=3"> FAQ's </a> </li> <li> <a href="#?page=4"> Item </a> </li> <li> <a href="#?page=5"> Create </a> </li> </ul> </div> </div> </div> script标签中的jquery： $(function() { $(".nav li").click(function() { $(".nav li").removeClass('active'); setTimeout(function() { var page = $.QueryString("page"); $(".nav li:eq(" + page + ")").addClass("active"); }, 300); }); }); 我已经完成了bin，所以请单击此处Http：//codebins.com/bin/4ldqpaf 这些对我无效。我的Bootstrap设置导航到单独的页面（因此我无法在单击操作上执行此操作，但是在导航到新页面的导航上删除了活动类），而我的URL不完全匹配。因此，根据我的基于例外的情况，这就是我所做的。希望它能帮助他人： //Adding the active class to Twitter bootstrap navs, with a few alternate approaches $(document).ready(function() { var rawhref = window.location.href; //raw current url var newpage = ((window.location.href.match(/([^\/]*)\/?$/)[1]).substring(1)); //take only the last part of the url, and chop off the first char (substring), since the contains method below is case-sensitive. Don't need to do this if they match exactly. if (newpage == 'someNonMatchingURL') { //deal with an exception literally newpage = 'matchingNavbarText' } if (rawhref.indexOf('somePartofURL') != -1) { //look for a consistent part of the path in the raw url to deal with variable urls, etc. newpage = "moreMatchingNavbarText" } $(".nav li a:contains('" + newpage + "')").parent().addClass('active'); //add the active class. Note that the contains method requires the goofy quote syntax to insert a variable. }); 即使在URL中使用参数，也可以激活菜单和子菜单，请使用代码bellow： // Highlight the active menu $(document).ready(function () { var action = window.location.pathname.split('/')[1]; // If there's no action, highlight the first menu item if (action == "") { $('ul.nav li:first').addClass('active'); } else { // Highlight current menu $('ul.nav a[href="/' + action + '"]').parent().addClass('active'); // Highlight parent menu item $('ul.nav a[href="/' + action + '"]').parents('li').addClass('active'); } }); this接受URL，例如： /posts /posts/1 /posts/1/edit $(function() { // Highlight the active nav link. var url = window.location.pathname; var filename = url.substr(url.lastIndexOf('/') + 1); $('.navbar a[href$="' + filename + '"]').parent().addClass("active"); }）; 有关更多详细信息在这里单击！

有可能将positalizecss集成到bootstrap

我问自己（未经测试）是否可以将引导程序和poleterizecss整合到同一项目中 由于两个框架都是出于相同的目的，并且可能在S ...

Bootstrap模式和MMENU菜单发生冲突

中单击按钮时会键op。

解决依赖订单错误：“ Bootstrap的JavaScript需要jQuery” [封闭]

带有bootstrap

我想创建一个杂志风格的网站，最好使用Bootstrap（如果可能的话）。我希望它看起来像这样： 谁能告诉我是否有可能与botst一起做这样的事情...

如何从Bootstrap 5手风琴雪佛龙中删除图标动画？

在上一个或下一个按钮时，如何停止骑自行车的bootstrap 5旋转木马

我面临着造型问题。 将我的文本行插入一行的最佳方法是什么？ 问题的屏幕截图：

我的代码很简单： <section id="key-features" class="key-features"> <div class="container"> <h2>Key Features</h2> <div class="col-md-4 col-sm-4 col-xs-12"> <ul> <li><img src="images/icons/1.png" alt="Atmospheric pressure test"/>Atmospheric pressure test</li> <li><img src="images/icons/compass.png" alt="Altitude monitor"/>Altitude monitor</li> <li><img src="images/icons/alc.png" alt="Temperature"/>Temperature test</li> <li><img src="images/icons/hr.png" alt="Heart rate"/>Heart rate monitor</li> <li><img src="images/icons/shoe.png" alt="Pedometer"/>Pedometer</li> </ul> </div> <div class="col-md-4 col-sm-4 col-xs-12 pull-left"> <ul> <li><img src="images/icons/food.png" alt="Calorie"/>Calorie</li> <li><img src="images/icons/location.png" alt="Distance"/>Distance</li> <li><img src="images/icons/sleep.png" alt="Sleep monitor"/>Sleep monitor</li> <li><img src="images/icons/bell.png" alt="Sedentary remind"/>Sedentary remind</li> <li><img src="images/icons/drink.png" alt="Water drink remind"/>Water drink remind</li> </ul> </div> <div class="col-md-4 col-sm-4 col-xs-12 pull-left"> <ul> <li><img src="images/icons/alarm.png" alt="test"/>Alarm remind</li> <li><img src="images/icons/phone.png" alt="Call remind"/>Call remind</li> <li><img src="images/icons/camera.png" alt="Photograph"/>Photograph</li> <li><img src="images/icons/dna.png" alt="Share moments"/>Share moments</li> <li><img src="images/icons/bt.png" alt="Anti-los"/>Anti-lost</li> </ul> </div> </div> </section> 通过CSS'overflow，您的元素需要具有固定的界限。由于您正在编写一些纯文本，并且您的浏览器将自动包装到新系列中，并且您的元素界限已被超越。为了禁用您必须先使用white-space: nowrap;。之后，您可以通过做overflow: auto;。 由于您需要在所有元素上，因此您不必手动检查是否有些奇怪，您会这样做： li 您的文本不应再溢出了，现在您可以在元素内部滚动以炫耀缺少的内容。 demo 我建议使用它，此代码可以防止文本包装，并且还可以防止长文本通过在文本长度超出某些限制的情况下在末尾添加椭圆的长文本来破坏其他项目。 li { overflow: auto; white-space: nowrap; } 您可以在此处看到实时示例以及其他解决方案-http：//www.tutorialrepublic.com/css-tutorial/css3-text-overflow.php 由于问题是关于Bootstrap的，这是官方文档：Https：//getbootstrap.com/docs/5.3/helpers/text-truncation/ 基本上，您只需要使用li { width: 400px; /* change this according to your layout */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 类即可。 text-truncate

发现React类型无效

DATATABLES中的dropdown 首先，我试图解决我的问题 bootstrap按钮下拉响应式表不可见，因为滚动不可见 和 响应表中的引导程序下拉菜单 但是没有...

bootstrap按钮在响应式表中下拉下拉响应表，因为滚动不可见

WAGTAIL / CODEREDCMS：未定义jQuery ReferenterRor $，无法确定原因