Tag: twitter bootstrap 3
Bootstrap 3.0 – 包含固定列大小的stream体网格
我正在学习如何使用Bootstrap。 目前，我正在涉足布局。 虽然Bootstrap非常酷，但是我看到的所有东西似乎过时了。 对于我的生活，我有我认为是一个基本的布局，我不明白。 我的布局如下所示： ————————————————————————— | | | | | | | | | 240px | 160px | All Remaining Width of the Window | | | | | | | | | ————————————————————————–| 这个网格需要占据整个窗口的高度。 从我的理解，我需要混合固定和stream体宽度。 但是，Bootstrap 3.0似乎没有stream体类了。 即使这样做，我似乎也无法弄清楚如何混合stream体和固定的柱尺寸。 有谁知道如何在Bootstrap 3.0中做到这一点？ 谢谢
以行内forms引导全宽文本input
我正在努力创build一个适合我的容器区域的整个宽度的文本框。 <div class="row"> <div class="col-md-12"> <form class="form-inline" role="form"> <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)"> <button type="submit" class="btn btn-lg">Search</button> </form> </div> </div> 当我这样做的时候，这两个表单元素就像我所期望的那样是内联的，但是最好不要超过几列。 将鼠标hover在萤火虫的col-md-12 div上显示它占用了预期的全宽。 这只是文字input，似乎并没有填补。 我甚至尝试添加一个内联宽度值，但它没有改变任何东西。 我知道这应该是简单的，只是现在感觉真的很愚蠢。 这是一个小提琴： http : //jsfiddle.net/52VtD/4119/embedded/result/ 编辑： 所选的答案在每个方面都是彻底的，是一个很好的帮助。 这就是我最终使用的。 不过，我认为我最初的问题实际上是Visual Studio 2013中的默认MVC5模板的一个问题。它包含在Site.css中： input, select, textarea { max-width: 280px; } 显然，这是阻止文本input适当扩大…公平的警告未来的ASP.NET模板用户…
降低bootstrap 3.0 navbar的高度
我试图减less固定的顶级行为使用的引导3.0导航栏高度。 在这里，我使用的代码。 HTML <div class="tnav"> <div class="navbar navbar-fixed-top" role="banner"> <div class="navbar-inner-sm"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <nav class="collapse navbar-collapse" role="navigation"> <ul class="nav navbar-nav pull-right"> <li class="active"> <a href="../getting-started">Getting started</a> </li> <li> <a href="../css">Ext01</a> </li> <li> <a href="../components">Language</a> </li> <li> <a […]
Bootstrap 3面板头button位置错误
我正在使用boostrap 3，我想在右上angular的面板标题中添加一些button。 试图添加它们时，它们显示在标题基线下面。 代码： http ： //bootply.com/82631 什么是缺less的CSS我应该添加到标题，面板标题或button？
如何在不包装的情况下在引导列之间添加余量
我的布局目前看起来像这样 在中间的列中，我想在每个Server Div之间添加一个小的余量。 但是，如果我给CSS添加一个边距，它最终会绕行，看起来像这样 <div class="row info-panel"> <div class="col-md-4 server-action-menu" id="server_1"> <div> Server 1 </div> </div> <div class="col-md-4 server-action-menu" id="server_2"> <div> Server 2 </div> </div> <div class="col-md-4 server-action-menu" id="server_3"> <div> Server 3 </div> </div> <div class="col-md-4 server-action-menu" id="server_4"> <div> Server 4 </div> </div> <div class="col-md-4 server-action-menu" id="server_5"> <div> Server 5 </div> </div> <div class="col-md-4 server-action-menu" […]
Bootstrap 3断点和媒体查询
在http://getbootstrap.com/css/上说： 我们使用以下媒体查询来在我们的网格系统中创build关键断点。 额外的小设备（手机，高达480px）：没有媒体查询，因为这是Bootstrap中的默认设置 小设备（平板电脑，768像素及以上）：@media（min-width：@ screen-sm）{…} 中等设备（桌面，992px及以上）：@media（min-width：@ screen-md）{…} 大型设备（大型桌面，1200像素及以上）：@media（min-width：@ screen-lg）{…} 我们应该能够在媒体查询中使用@ screen-sm，@ screen-md和@ screen-lg名称吗？ 因为它不适合我 我必须使用@media（min-width：768px）{…}之类的像素测量值才能使用。 难道我做错了什么？ 另外，对于额外的小设备是一个错误的参考480px？ 不应该说高达767px？
100％宽度的Twitter Bootstrap 3模板
我是一个bootstrap新手，我有一个100％宽的模板，我想用bootstrap编码。 第一列从左上angular开始，我有一个谷歌地图延伸到最右边。 我以为我可以用container-fluid类做到这一点，但似乎不再可用。 我不知道如何用bootstrap实现这个布局3.我使用themeforest中的几何PSD模板，如果你想查看布局的话，这里的链接： http ://themeforest.net/item/geometry-design-for- 地理位置-社会- networkr / 4752268
在Rails应用程序上安装Bootstrap 3
我试图在我的Rails应用程序上安装Bootstrap 3.0。 我最近完成了Michael Hartl的教程，现在正试图用这个新版本的Bootstrap构build我自己的系统，但是我有一些我不确定的问题。 我的系统规格： MBP上的OS X Mountain Lion Rails 4.0 Ruby 2.0 我有问题： 什么是在我的Gemfile中使用最好的gem？ 我发现了其中的一些。 我在custom.css.scss上导入了什么？ 我读过的地方和2.3.2不一样。 还有什么我必须做Bootstrap工作，或者是剩下的步骤相同的我遵循的Bootstrap 2.3.2？ 编辑 以下是GitHub上的bootstrap-rails项目首先要做的事情： gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails', :github => 'anjlab/bootstrap-rails' 然后它说： gem 'anjlab-bootstrap-rails', '>= 3.0.0.0', :require => 'bootstrap-rails' 他们做同样的事情，还是你必须这样做呢？
我可以在Twitter Bootstrap的工具提示中使用复杂的HTML吗？
如果我检查官方文档 ，我可以看到一个名为HTML的属性： Name | Type | default | Description —————————————————————————- html | boolean | false | Insert html into the tooltip. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks. 它说，“插入HTML到工具提示”，但types是布尔值。 如何在Tooltip中使用复杂的html？
Bootstrap权利移动视图顶部的列
我有一个像这样的Bootstrap页面： <div class="row"> <div class="col-md-6"> A </div> <div class="col-md-6"> B </div> </div> 好像： —– |A|B| —– 所以，如果我在移动设备上查看它，列A位于顶部，但我希望B位于顶部。 这可能吗？ 我试了推拉，但没有奏效。
