Questions tagged «twitter-bootstrap»

我正在尝试更改模态表单的大小，或者-使它响应我在那里渲染的内容。我正在使用它来呈现表单，如果需要，我希望处理滚动。 我渲染的表单可能还需要50px-只是缺少按钮。 因此，我尝试覆盖application.css.scss文件（使用Rails 3.2）中的.modal样式，但是max-height和溢出碎片似乎被覆盖了。 有什么想法吗？

154 twitter-bootstrap 

我正在尝试使用jQuery Validation Plugin将验证添加到我的表单中，但是在使用输入组时，该插件会在输入错误消息时出现问题。 $('form').validate({ rules: { firstname: { minlength: 3, maxlength: 15, required: true }, lastname: { minlength: 3, maxlength: 15, required: true } }, highlight: function(element) { $(element).closest('.form-group').addClass('has-error'); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-error'); } }); 我的代码： http ：//jsfiddle.net/hTPY7/4/

154 twitter-bootstrap  jquery-validate  twitter-bootstrap-3 

我目前在Twitter Bootstrap中使用弹出窗口，其启动方式如下： $('.popup-marker').popover({ html: true, trigger: 'manual' }).click(function(e) { $(this).popover('toggle'); e.preventDefault(); }); 如您所见，它们是手动触发的，然后单击.popup-marker（具有背景图像的div）可切换弹出框。这很好用，但我也希望能够通过单击页面上其他任意位置（而不是弹出窗口本身）来关闭弹出窗口。 我尝试了几种不同的方法，包括以下内容，但没有结果可显示： $('body').click(function(e) { $('.popup-marker').popover('hide'); }); 如何单击页面上的其他任何位置来关闭弹出窗口，而不能单击弹出窗口本身呢？

154 javascript  jquery  twitter-bootstrap 

再次更新：我通过选择最佳答案来结束这个问题，以防止人们在未真正理解问题的情况下添加答案。实际上，如果不使用网格或添加额外的CSS，就无法通过内置功能来实现。如果您要处理的help-block元素需要超出简短的输入，但它们是“内置”的，则网格将无法很好地工作。如果这是一个问题，我建议使用额外的CSS类，你可以在BS3讨论找到这里。现在BS4已经发布，可以使用包含的大小调整样式来进行管理，因此不再需要太长的时间了。感谢大家对这个流行的SO问题的良好投入。 更新：这个问题仍然悬而未决，因为它是关于BS中的内置功能来管理输入宽度而无需求助于网格（有时必须独立管理）。我已经使用自定义类来管理它，所以这不是基本CSS的方法。该任务在BS 功能讨论列表中，并且尚未解决。 原始问题： 有人想出一种在BS 3上管理输入宽度的方法吗？我目前正在使用一些自定义类来添加该功能，但是我可能错过了一些未记录的选项。 当前的文档说使用.col-lg-x，但是显然不起作用，因为它只能应用于容器div，这会导致各种布局/浮动问题。 这是一个小提琴。奇怪的是，在小提琴上，我什至无法调整表单组的大小。 http://jsfiddle.net/tX3ae/ <form role="form" class="row"> <div class="form-group col-lg-1"> <label for="code">Name</label> <input type="text" class="form-control"> </div> <div class="form-group col-lg-1 "> <label for="code">Email</label> <input type="text" class="form-control input-normal"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div>

154 css  twitter-bootstrap  twitter-bootstrap-3 

有没有一种方法可以通过“数据切换”为引导程序控件分配多个事件。例如，假设我想要一个分配了“工具提示”和“按钮”切换开关的按钮。 尝试使用data-toggle =“ tooltip button”，但只有工具提示有效。 编辑： 这很容易“解决” $("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");

153 button  twitter-bootstrap  binding 

我需要在单击“添加到愿望清单”按钮时拨打警报，并且应该在2秒钟内消失警报。这是我尝试过的方法，但是警报一出现便立即消失。不知道错误在哪里。有人可以帮我吗？ JS脚本 $(document).ready (function(){ $("#success-alert").hide(); $("#myWish").click(function showAlert() { $("#success-alert").alert(); window.setTimeout(function () { $("#success-alert").alert('close'); }, 2000); }); }); HTML代码： <div class="product-options"> <a id="myWish" href="" class="btn btn-mini">Add to Wishlist </a> <a href="#" class="btn btn-mini"> Purchase </a> </div> 警报框： <div class="alert alert-success" id="success-alert"> <button type="button" class="close" data-dismiss="alert">x</button> <strong>Success!</strong> Product have added to your …

153 javascript  html  twitter-bootstrap  alert 

我使用Twitter的引导的酥料饼这里。现在，当我滚动查看弹出框文本时，会出现一个弹出框，其中仅包含来自<a>的data-content属性的文本。我想知道是否有任何地方可以放置<div>弹出窗口。潜在地，我想在那里使用php和mysql，但是如果我可以使div正常工作，我想我可以弄清楚其余部分。我尝试将数据内容设置为divID，但没有成功。 HTML： <a class='danger' data-placement='above' rel='popover' data-content='#PopupDiv' href='#'>Click</a>

151 twitter-bootstrap  popover 

我在使此plunkr（select2 + angulat-ui）工作时遇到问题。 http://plnkr.co/edit/NkdWUO?p=preview 在本地设置中，我得到了select2的工作，但是我无法按照docs中所述设置宽度。它太窄而无法使用。 谢谢。 编辑：别介意plnkr，我在这里http://jsfiddle.net/pEFy6/找到了一个工作的小提琴 似乎select2的行为是折叠到第一个元素的宽度。我可以通过bootstrap设置宽度。class="input-medium"仍然不确定为什么angular-ui不使用配置参数。

151 css  twitter-bootstrap  angularjs  jquery-select2 

我想实现twitter bootstrap下拉菜单，这是我的代码： <span class="dropdown"> <a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/static/img/topmenu_preferences.png" /><b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">a</a></li> <li><a href="#">b</a></li> <li><a href="#">c</a></li> <li class="divider"></li> <li><a href="#">d</a></li> </ul> 下拉菜单效果很好，我的下拉菜单位于屏幕右侧，当我单击下拉菜单时，列表位于屏幕之外。在屏幕上看起来像： 我该如何解决？

151 html  css  twitter-bootstrap 

我想在我的网站上放一张桌子。问题在于该表将有约400行。如何限制桌子的高度，并对其应用滚动条？这是我的代码： <div class="span3"> <h2>Achievements left</h2> <table class="table table-striped"> <thead> <tr> <th>#</th> <th>Name</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Something</td> </tr> <tr> <td>2</td> <td>Something</td> </tr> <tr> <td>3</td> <td>Something</td> </tr> <tr> <td>4</td> <td>Something</td> </tr> <tr> <td>5</td> <td>Something</td> </tr> <tr> <td>6</td> <td>Something</td> </tr> </tbody> </table> <p><a class="btn" href="#">View details »</a></p> </div> 我试图将最大高度和固定高度应用于表格，但是它不起作用。

149 twitter-bootstrap 

假设此标记： <table class="table table-bordered" align="center"> 不知道我有多少个单元格，表格始终是100％宽度。为什么？

148 twitter-bootstrap 

我正在使用Twitter Bootstrap，并且有Google地图。 地图上的图像（例如标记）正由Bootstrap中的CSS倾斜。 在Bootstrap CSS中有： img { border: 0 none; height: auto; max-width: 100%; } 当我max-width使用Firebug 禁用该属性时，标记图像会正常显示。如何防止Bootstrap CSS影响Google地图图像？

147 google-maps  twitter-bootstrap  css 

关闭。这个问题是题外话。它当前不接受答案。 想改善这个问题吗？ 更新问题，使它成为Stack Overflow 的主题。 7年前关闭。 改善这个问题 有Twitter Bootstrap的托管版本吗？类似于Google上的jQuery托管版本吗？

144 twitter-bootstrap  cdn 

bootstrap将div浮动到右侧的正确方法是什么？我以为pull-right是推荐的方法，但是它不起作用。 @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); .container { margin-top: 10px; } <div class="container"> <div class="row-fluid"> <div class="span6"> <p>Text left</p> </div> <div class="span6 pull-right"> <p>text right</p> </div> </div> </div> 运行代码段Hide results展开摘要

142 html  css  twitter-bootstrap 

我已经能够使用以下代码最终获得一些工具提示： <a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a> 然后 <script> $('[rel=tooltip]').tooltip(); </script> 我遇到的问题是它使用的是jQueryUI工具提示（无箭头，丑陋的大工具提示）而不是Bootstraps。 我需要怎么做才能使用Bootstrap工具提示而不是jQueryUI？

141 jquery-ui  twitter-bootstrap