Questions tagged «twitter-bootstrap»

Bootstrap是一个前端框架，旨在启动Web应用程序和网站的开发。对于与Bootstrap版本有关的问题，请使用“ twitter-bootstrap-2”，“ twitter-bootstrap-3”和“ bootstrap-4”标签中特定版本的标签。

7
单击保持打开Bootstrap下拉菜单
我使用bootstrap下拉菜单作为购物车。购物车中有一个“删除产品”按钮（链接）。如果单击它，我的shoppingcart脚本会删除该产品，但菜单会消失。有什么办法可以防止这种情况吗？我尝试了e.startPropagation，但这似乎不起作用： <div id="shoppingcart" class="nav-collapse cart-collapse"> <ul class="nav pull-right"> <li class="dropdown open"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Totaal: € 43,00</a> <ul class="dropdown-menu"> <li class="nav-header">Pakketten</li> <li> <span class="quantity">1x</span> <span class="product-name">Test Product </span> <span class="product-remove"><a class="removefromcart" packageid="4" href="#">x</a> </span></li> <li><a href="#">Total: € 43,00</a></li> <li><a href="/checkout">Checkout</a></li> </ul> </li> </ul> 如您所见，带有class =“ dropwdown-toggle”的tha元素使其成为一个下拉列表。另一个想法是，我只是以编程方式单击将其重新打开。因此，如果有人可以向我解释如何以编程方式打开Bootstrap下拉菜单，那将很有帮助！
21
由于滚动，响应表内的引导按钮下拉不可见
当响应和滚动活动时，表内的下拉按钮存在问题，因为由于overflow: auto;属性而无法看到下拉菜单。如何解决此问题，以便在折叠按钮时显示按钮的下拉选项？我可以使用一些jQuery，但是在左右滚动时遇到问题后，我决定寻找其他解决方案。我附了一张照片，以更好地理解。 这是一个小js小提琴：
6
了解Bootstrap 3中的网格类（col-sm-＃和col-lg-＃）
我刚开始使用Bootstrap 3，但在理解如何使用网格类时遇到了一些麻烦。 到目前为止，这是我所发现的： 看起来这些类col-sm-#与col-lg-#以前的类不同col-#，它们仅在屏幕大于特定大小（分别为768px和992px）时才适用。如果省略-sm-或-lg-，则div永远不会折叠到一列中。 然而，当我创建一个行内的两个div，它们都col-sm-6似乎他们只并排窗口时768px和992px宽之间。换句话说，如果我缩小窗口，一路下来，然后慢慢扩大它的布局是单列，然后两个列，然后回单柱再次。 这是预期的行为吗？ 如果我希望两列超过768像素，我应该同时应用这两个类吗？（<div class="col-sm-6 col-lg-6">） 应该col-6 也包括在内？<div class="col-6 col-sm-6 col-lg-6">
8
Bootstrap 3.0 Popover和工具提示
我是Bootstrap的新手，无法正常使用popover和工具提示功能。我对下拉菜单和模型没有问题，但是似乎缺少一些弹出框和工具提示。 我正在显示一些工具提示，但是它们的样式和位置都不像引导示例一样。而且弹出窗口根本不起作用。 请看一下，让我知道我所缺少的。 <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" media="screen"> <link href="css/font-awesome.min.css" rel="stylesheet" media="screen"> <link href="css/index.css" rel="stylesheet" media="screen"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE …
9
如何使用Bootstrap2将div居中？
http://twitter.github.com/bootstrap/scaffolding.html 我尝试了所有组合： <div class="row"> <div class="span7 offset5"> box </div> </div> 要么 <div class="container"> <div class="row"> <div class="span7 offset5"> box </div> </div> </div> 已更改跨度和偏移量数字... 但是我无法得到一个完美地位于页面中心的简单盒子:( 我只想要一个6栏宽的盒子居中... 编辑： 做到了 <div class="container"> <div class="row" id="login-container"> <div class="span8 offset2"> box </div> </div> </div> 但是盒子太宽了，我可以用span7做什么吗？ span7 offset2在左侧提供span7 offset3额外的填充在右侧提供额外的填充...
16
如何使用Twitter Bootstrap弹出窗口进行jQuery验证通知？
我可以很容易地使用引导程序使弹出窗口显示出来，也可以使用标准的jQuery验证插件或jQuery验证引擎进行验证，但是我不知道如何将它们引入另一个。 我认为我需要的是验证器要显示通知时调用的钩子，为它提供一个闭包，将消息和目标元素传递给弹出框。这似乎是一种依赖注入。 从理论上讲一切都很好，但我只是无法弄清楚该钩子在哪里，或者即使在任一验证引擎中都存在。他们俩似乎都打算承担显示通知的责任，这些通知带有错误，错误类型（我甚至不一定需要消息文本）及其相关元素，以便显示通知，其中包含各种精美的布局，包装，样式选项至。我找到了整个表单的钩子，而不是单个通知的钩子。 我更喜欢使用类定义规则的验证系统，因为它们可以很好地与动态创建的表单一起使用。 任何人都有解决方案或更好的主意吗？
10
Twitter引导程序可滚动模式
我正在为我正在处理的项目使用Twitter Bootstrap。 我有一个模态窗口，其中的窗体更长一些，我不喜欢当窗口太小时模态不滚动（如果只是消失在无法滚动的页面上）。 为了解决这个问题，我使用了以下css .modal { overflow-y:auto; max-height:90%; margin-top:-45%; } 这完全符合我在Chrome中所需的方式（也就是说，当窗口足够大时，窗体为完整大小，但是随着窗口的缩小，模态窗口会缩小并变得可滚动）。问题是在IE中，模态不在屏幕上。有谁对这个问题有更好的解决方案？ 我的示例可以在tinyhousemap.com上找到（在导航窗口中单击“向地图添加条目”以显示模式） 谢谢
27
引导模式：关闭电流，打开新的
我已经寻找了一段时间，但是找不到解决方案。我想要以下内容： 在Bootstrap模式下打开一个URL。我有这个问题。因此，内容是动态加载的。 当用户在此模式中按下按钮时，我希望隐藏当前模式，然后在此之后，立即希望使用新URL（用户单击）打开一个新模式。第二模态的该内容也被动态加载。 如果用户随后关闭了第二个模态，则第一个模态必须再次返回。 我已经盯着这几天了，希望有人能帮助我。 提前致谢。
4
iPhone上的简单Bootstrap页面无响应
我下载了Twitter Bootstrap示例，并使用它创建了一个简单的Rails项目。我在需要的地方复制了CSS，它显示正常。我还复制了js，一切在我的桌面上都运行良好：当我更改浏览器的大小时，它将重新组织页面。当使用大小不同的“响应式设计测试工具”时，它的效果很好。 我的问题出在我的iPhone上：它像在我的桌面上一样显示Juste。 当我尝试Bootstrap Hero Example页面（这是我开始的页面）时，它在我的iPhone上运行良好。 可能出什么问题了？我几乎没有接触过任何CSS，只是在页脚上添加了填充。 仅供参考，我更改的CSS是将我的应用程序链接到application.css以下内容： /* Application stylesheet */ @import url(bootstrap.css); @import url(bootstrap-responsive.css); /* Body */ body { padding-top: 60px; padding-bottom: 40px; } /* Footer */ footer { padding: 20px 0; }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.