Tag: twitter bootstrap 3

如何在twitter引导中正确清理浮动？

我刚开始学习twitter bootstrap ，我想知道什么是正确的方法是清除浮动。 通常我会做这样的事情： HTML： <div class="container"> <div class="main"></div> <div class="sidebar"></div> <div class="clear"></div> </div> CSS： .clear { clear: both; } .main { float: left; } .sidebar { float: right; } 请忽略上述的基础设施，因为这只是一个例子。 现在在bootstrap说如果我想浮动一些文本旁边的导航部分什么是这样做的正确方法？ 在bootstrap考虑这个例子： <div class="main_container"> <header id="main_header" class="col-md-12"> <nav class="navbar navbar-default" role="navigation"> </nav> <div class="contact"> </div> </header> </div> 我想漂浮在navbar栏旁边的contact字段。 我已经阅读了bootstrap的.clearfix类，我只是应用这一点，因为我已经做了上面（浮动后）？ ….或者我应该把这个类应用到其他东西上？

引导3 datetimepicker事件没有启动

我正在使用Bootstrap 3 DateTimePicker ，我想示例8（链接datetimepicker）。 使用Javascript $('#dpStart').datetimepicker({ pickDate: true, //en/disables the date picker pickTime: false, format: "DD-MM-YYYY", useMinutes: false, //en/disables the minutes picker useSeconds: false }); $('#dpEnd').datetimepicker({ pickDate: true, //en/disables the date picker pickTime: false, format: "DD-MM-YYYY", useMinutes: false, //en/disables the minutes picker useSeconds: false }); $("#dpStart").on("dp.change", function(e) { alert('hey'); $('#dpEnd').data("DateTimePicker").setMinDate(e.date); }); $("#dpEnd").on("dp.change", function(e) { $('#dpStart').data("DateTimePicker").setMaxDate(e.date); […]

如何使用Twitter Bootstrap v3.0构build两列stream体布局

由于bootstrap在v3.0中删除了* fluid css类，所以我找不到构build两列stream体布局的方法。 目标是在旧的文档中实现类似于stream体布局示例的布局： http ://getbootstrap.com/2.3.2/scaffolding.html#layouts

多字段与表格集

对不起，模糊的标题，我不知道如何更好地描述它。 我目前正在升级一个网站引导3，并得到一个表格行多input一个小问题。 在bootstrap 2中，我只是简单地创build了两个.spanX .controls.controls-row ，里面有.spanX元素来创build必要的列。 但是，由于这些在引导3中被删除，我用.form-group和新的列类replace了它们。 如果我在表单中有两行（在这个例子中为fieldset），那么如果第二行是一列的行（见下面的代码和附加屏幕截图），那么第一行就变成不可编辑的。 我用萤火虫检查了元素，发现第二个字段集的.col-sm-12放在.form-group ，不让用户点击里面的元素。 在第一个.col-sm-12 ，一切正常。 我也尝试在每个解决问题的.form-group放置一个.row ，但是增加了表单行的宽度，所以它在fieldset中不再有左边距。 有没有办法解决这个问题，而不增加表格行宽？ 提前致谢！ 编辑：我添加生成的代码作为一个jsFiddle %fieldset %legend= t('.login_information') .form-group .col-sm-12 = f.label :login = f.text_field :login, :class => 'form-control', :required => true .form-group .col-sm-6 = f.label :password = f.password_field :password, :class => 'form-control' .col-sm-6 = f.label :password_confirmation = f.password_field :password_confirmation, :class => 'form-control' […]

Bootstrap 3在每个项目中具有不同高度的网格 – 是否仅使用CSS解决？

我试图制作一个缩略图的网格，其中每个缩略图都有一个图像和一个标签。 如果所有标签具有相同的长度，则工作正常，因为那么所有的缩略图都具有相同的高度： http://www.bootply.com/iSqwWyx5ms 但是，如果我缩短最右边的缩略图的文本，则下面一行的一部分会被推入一个新行，如下所示： http://www.bootply.com/Wqd021aaeM 我想要的是从第一行结束的最低点开始的第二行。 我知道我可以用JavaScript解决它 – find每一行中最长的缩略图，并设置其他缩略图有这个高度。 问题是，我有什么办法做，或者其他可以解决我的问题，只使用CSS？ 更新：我不知道在一行中有多less物品。 例如，在一个小屏幕上，我有一个连续的2个项目，而在一个更大的屏幕上它将是3，所以当一个新的行开始设置的解决scheme对我不好。

引导jquery show.bs.modal事件不会触发

我使用bootstrap 3文档中的模式示例。 模式的作品。 但是我需要访问show.bs.modal事件，当它触发。 现在我只是想： $('#myModal').on('show.bs.modal', function () { alert('hi') }) 没有任何事情发生，事件不会发生。 我究竟做错了什么？？？ 这对我来说没有意义。

使用prototype.js时，Twitter Bootstrap 3下拉菜单消失

在magento网站上使用bootstrap 3＆prototype.js时，我遇到了一个问题。 基本上，如果你点击下拉菜单（我们的产品），然后点击背景，下拉菜单（我们的产品）消失（prototype.js添加“display：none;”到li）。 这是一个问题的演示： http : //ridge.mydevelopmentserver.com/contact.html 您可以看到，下拉菜单的工作方式应该不会在下面的链接中包含prototype.js： http ： //ridge.mydevelopmentserver.com/ 有没有其他人遇到这个问题之前，或有冲突的可能的解决办法？ 容易修正： 只要用这个引导友好的replaceMagento的prototype.js文件： https://raw.github.com/zikula/core/079df47e7c1f536a0d9eea2993ae19768e1f0554/src/javascript/ajax/original_uncompressed/prototype.js 您可以在prototype.js文件中看到修改bootstrap问题的更改： https://github.com/zikula/core/commit/079df47e7c1f536a0d9eea2993ae19768e1f0554 注意：在prototype.js之前，jQuery必须包含在你的magento皮肤中。例子： <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/prototype/prototype.js"></script> <script type="text/javascript" src="/js/lib/ccard.js"></script> <script type="text/javascript" src="/js/prototype/validation.js"></script> <script type="text/javascript" src="/js/scriptaculous/builder.js"></script> <script type="text/javascript" src="/js/scriptaculous/effects.js"></script> <script type="text/javascript" src="/js/scriptaculous/dragdrop.js"></script> <script type="text/javascript" src="/js/scriptaculous/controls.js"></script> <script type="text/javascript" src="/js/scriptaculous/slider.js"></script> <script type="text/javascript" src="/js/varien/js.js"></script> <script type="text/javascript" src="/js/varien/form.js"></script> <script type="text/javascript" src="/js/varien/menu.js"></script> <script […]

确认删除使用引导3模式框

我需要确认删除使用引导3模式框（是/否）。 怎么能创build这个？ HTML代码： <form action ="<?php echo $URL .'/admin/privileges.php?action=editable' ?>" method="POST"> <button class='btn btn-danger btn-xs' type="submit" name="remove_levels" value="delete"><span class="fa fa-times"></span> delete</button></td> </form>

在引导程序中使用容器stream体会导致水平滚动条

这是一个简单的例子： <div class="container-fluid"> <div class="row"> <div class="col-lg-12">DUMMY CONTENT</div> </div> </div> 在小提琴演示 当我在浏览器中看到结果时，我得到一个水平滚动条。 为什么发生这种情况？ 我究竟做错了什么？

引导3 – 响应MP4video

我试图find自举网站上的一个很好的解决scheme，但我还没有得到答案。 我想我不能成为唯一一个为此而挣扎的人，但是我找不到任何帮助我的东西。 我试图在我的网站上embedded一个mp4video。 问题是，如果我使用iframe标签，我不能使用自动播放和循环。 正因为如此，我想用video标签（或其他支持自动播放和循环的东西）解决它。 之后，我试图让我的video响应一个对象标签，但是这不起作用。 即使我把它放在我的代码中（向你展示），你可以在下面看到： <div align="center"> <object class="embed-responsive-item"> <video autoplay loop > <source src="file.mp4" /> </video> </object> </div> 我希望你们中的任何人都能帮我解决这个问题。