Tag: twitter bootstrap
使用Twitter Bootstrap 3中心列
如何在Twitter Bootstrap 3中将容器中一列大小的div居中（12列） 请看起动器小提琴 。 <body class="container"> <div class="col-lg-1 col-offset-6 centered"> <img data-src="holder.js/100×100" alt="" /> </div> </body> 所以，我想要一个div ，一个centered集装箱为中心的类。 如果有多个div，我可以使用一行，但现在我只想要一个大小为一列的div在容器中（12列）。 我也不确定上述做法是否足够好，因为我们的目的不是要把div抵消一半。 我不需要div之外的空闲空间， div的内容会按比例缩小。 我想要空格外div空间均匀分布 （收缩直到容器宽度==一列）。
将数据传递给引导模式
我有几个超链接，每个超链接都附有一个ID。 当我点击这个链接时，我想打开一个模式（ http://twitter.github.com/bootstrap/javascript.html#modals ），并将此ID传递给模式。 我在谷歌search，但我找不到任何可以帮助我。 这是代码： <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'); }); }); 但是，当我点击超链接时，什么也没有发生。 当我给超链接href =“＃addBookDialog”，模式打开就好，但它不包含任何数据。 我遵循这个例子： 如何将值parameter passing给Bootstrap中的modal.show（）函数 （我也试过这个： 如何在模态对话中设置input值？ ）
与Bootstrap 3垂直alignment
我使用的是Twitter Bootstrap 3，当我想垂直alignment两个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来修复它，但是我觉得这不是一个很好的解决scheme。
我怎样才能使Bootstrap列高度相同？
我正在使用Bootstrap。 我怎样才能使三列同一高度？ 这是一个问题的截图。 我希望蓝色和红色的柱子与黄色柱子的高度相同。 这里是代码： <link href="../../../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>
如何居中alignment自举容器
我正在寻找一种方法来垂直居中alignmentjumbotron的container div，并将其设置在页面中间。 .jumbotron必须适应屏幕的整个高度和宽度，所以我使用了这个CSS。 .jumbotron{ heght:100%; width:100%; } .container div的宽度为1025px ，应该在页面的中间（垂直居中）。 .container{ width:1025px; } .jumbotron .container { max-width: 100%; } 我的HTML就像 <div class="jumbotron"> <div class="container text-center"> <h1>The easiest and powerful way</h1> <div class="row"> <div class="col-md-7"> <div class="top-bg"></div> </div> <div class="col-md-5 iPhone-features" style="margin-left:-25px;"> <ul class="top-features"> <li> <span><i class="fa fa-random simple_bg top-features-bg"></i></span> <p><strong>Redirect</strong><br>Visitors where they converts more.</p> </li> […]
IE8问题与Twitter Bootstrap 3
我正在使用新的Twitter Bootstrap创建一个网站。 该网站看起来不错，并在所有必需的浏览器除IE8以外的作品。 在IE8中，它似乎是显示移动版本的元素，但横跨我的桌面上的整个屏幕。 我相信我遇到的问题是Twitter引导程序首先是移动的。 所以出于某种原因IE8正在为这个选项。 我还注意到， container类似乎并没有按照预期拉入最大宽度的CSS属性。 任何人都可以看到我做错了什么？ <!– Favicon –> <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!– Bootstrap –> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"> <script src="/SiteFiles/js/modernizr.js"></script> <!– CSS –> <link href="/SiteFiles/css/main.css" rel="stylesheet"> <header> <div class="topArea clearfix"> <div class="container"> <div class="topLinks"> <div class="btn-group"> <span class="flag" data-toggle="dropdown"> </span> <ul class="dropdown-menu"> <li><a href="#">Country 1</a></li> <li><a […]
Twitter引导远程模式每次显示相同的内容
我正在使用Twitter引导程序，我已经指定了一个模式 <div class="modal hide" id="modal-item"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">x</button> <h3>Update Item</h3> </div> <form action="http://www.website.com/update" method="POST" class="form-horizontal"> <div class="modal-body"> Loading content… </div> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">Close</a> <button class="btn btn-primary" type="submit">Update Item</button> </div> </form> </div> 和链接 <a href="http://www.website.com/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a> <a href="http://www.website.com/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a> <a href="http://www.website.com/item/3" data-target="#modal-item" data-toggle="modal">Edit 2</a> 当我第一次点击这些链接时，我看到了正确的内容，但是当我点击其他链接时，它显示了第一次加载的内容，它不更新内容。 我希望每次点击都能更新。 […]
Bootstrap 3导航栏折叠
有什么办法来增加引导3导航栏折叠的点（即，使其折叠成纵向平板电脑上的下拉菜单）？ 这两个适用于引导2，但不是现在！ 如何使用Twitter引导程序响应更改导航栏崩溃阈值？ 更改默认的响应式导航栏断点
