Questions tagged «twitter-bootstrap»

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

30
使用Twitter Bootstrap 3将列居中
如何在Twitter Bootstrap 3的容器（12列）中将一列大小的div居中？ .centered { background-color: red; } <body class="container"> <div class="col-lg-1 col-offset-6 centered"> <img data-src="holder.js/100x100" alt="" /> </div> </body> 运行代码段隐藏结果展开摘要 我想要一个div类.centered，该类在容器内居中。如果有多个divs，我可能会使用一行，但是现在我只想要a div，其大小以一列为中心位于容器内（12列）。 我也不确定上述方法是否足够好，因为其目的不是要抵消div一半。我不需要外部的自由空间，div并且内容的内容div按比例缩小。我想在div外部留出空间以使其均匀分布（缩小直到容器宽度等于一列）。
30
如何使Bootstrap列都具有相同的高度？
我正在使用Bootstrap。如何使三根柱子的高度相同？ 这是问题的屏幕截图。我希望蓝色和红色列与黄色列的高度相同。 这是代码： <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-xs-4 panel" style="background-color: red"> some content </div> <div class="col-xs-4 panel" style="background-color: yellow"> catz <img width="100" height="100" src="https://lorempixel.com/100/100/cats/"> </div> <div class="col-xs-4 panel" style="background-color: blue"> some more content </div> </div> </div> 运行代码段隐藏结果展开摘要
23
与Bootstrap 3垂直对齐
我正在使用Twitter Bootstrap 3，并且在我想垂直对齐两个时遇到问题div，例如-JSFiddle链接： <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div class="row"> <div class="col-xs-5"> <div style="height:5em;border:1px solid #000">Big</div> </div> <div class="col-xs-5"> <div style="height:3em;border:1px solid #F00">Small</div> </div> </div> 运行代码段隐藏结果展开摘要 Bootstrap中的网格系统使用float: left，而不是display:inline-block，因此该属性vertical-align不起作用。我尝试使用margin-top进行修复，但是我认为这对于响应式设计不是一个好的解决方案。
14
如何使用jQuery打开Bootstrap模态窗口？
我正在使用Twitter Bootstrap模态窗口功能。当某人单击我的表单上的提交时，我想在单击表单中的“提交按钮”时显示模式窗口。 <form id="myform" class="form-wizard"> <h2 class="form-wizard-heading">BootStap Wizard Form</h2> <input type="text" value=""/> <input type="submit"/> </form> <!-- Modal --> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> …
6
Bootstrap 3中的sr-only是什么？
该类的sr-only用途是什么？是重要的还是我可以删除它？工作正常没有。 这是我的示例： <div class="btn-group"> <button type="button" class="btn btn-info btn-md">Departments</button> <button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Sales</a></li> <li><a href="#">Technical</a></li> <li class="divider"></li> <li><a href="#">Show all</a></li> </ul> </div>
30
Bootstrap模态出现在背景下
我直接从Bootstrap示例中使用了模态代码，仅包含bootstrap.js（而不包含bootstrap-modal.js）。但是，我的模态出现在灰色渐变（背景）下面，并且不可编辑。 看起来是这样的： 请参阅此提琴，以获取重现此问题的一种方法。该代码的基本结构如下： <body> <p>Lorem ipsum dolor sit amet.</p> <div class="my-module"> This container contains the modal code. <div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body">Modal</div> </div> </div> </div> </div> </body> body { padding-top: 50px; } .my-module { position: fixed; top: 0; left: 0; } 关于这是为什么的任何想法，或者我可以做些什么来解决此问题？
23
您如何使用Twitter Bootstrap获得居中的内容？
我正在尝试遵循一个非常基本的示例。使用入门页面和网格系统，我希望以下几点： <div class="row"> <div class="span12"> <h1>Bootstrap starter template</h1> <p>Example text.</p> </div> </div> 运行代码段隐藏结果展开摘要 ...将产生居中的文字。 但是，它仍然显示在最左侧。我究竟做错了什么？
11
将功能绑定到Twitter Bootstrap Modal关闭
我在一个新项目上使用Twitter Bootstrap lib，我希望页面的一部分刷新并检索模态关闭时的最新json数据。我看不到文档中的任何地方，有人可以向我指出或提出解决方案。 使用记录方法的两个问题 $('#my-modal').bind('hide', function () { // do something ... }); 我已经在模式上附加了“隐藏”类，因此它不会在页面加载时显示，因此会加载两次 即使我删除了hide类，并将元素ID设置为display:none并console.log("THE MODAL CLOSED");在我点击close时添加到上面的函数中，也没有任何反应。
10
将数据传递到引导模式
我有几个超链接，每个超链接都有一个ID。当我单击此链接时，我想打开一个模式（http://twitter.github.com/bootstrap/javascript.html#modals），并将此ID传递给模式。我在Google上进行了搜索，但找不到任何可以帮助我的东西。 这是代码： <a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog"></a> 哪个应该打开： <div class="modal hide" id="addBookDialog"> <div class="modal-body"> <input type="hidden" name="bookId" id="bookId" value=""/> </div> </div> 这段代码： $(document).ready(function () { $(".open-AddBookDialog").click(function () { $('#bookId').val($(this).data('id')); $('#addBookDialog').modal('show'); }); }); 但是，当我单击超链接时，没有任何反应。当我提供超链接时<a href="#addBookDialog" ...>，模式可以很好地打开，但是它不包含任何数据。 我遵循以下示例：如何将值参数传递给Bootstrap中的modal.show（）函数 （我也尝试过这种方法：如何在模式对话框中设置输入值？）
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.