Tag: twitter bootstrap 3
Bootstrap 3上的input宽度
再次更新：我通过select最高的答案来closures这个问题，以防止人们添加答案而不真正理解问题。 实际上，没有办法使用构buildfunction来完成，而不使用网格或添加额外的CSS。 如果你正在处理的help-block元素需要超出一个简短的input，例如，但他们是“内置”，网格不能正常工作。 如果这是一个问题，我build议使用额外的CSS类，你可以在这里的BS3讨论中find 。 现在，BS4已经不在了，可以使用包含的大小样式来pipe理这个，所以这不会长久相关。 感谢所有在这个受欢迎的SO问题上的良好input。 更新：这个问题仍然是开放的，因为它是关于BS中的内置function来pipe理input宽度而不依靠网格（有时它们必须被独立pipe理）。 我已经使用自定义类来pipe理这个，所以这不是基本的CSS的一个方法。 这个任务是在BS function讨论列表中 ，还有待解决。 原问题：有人找出一种方法来pipe理BS 3上的input宽度吗？ 我目前正在使用一些自定义类来添加function，但我可能错过了一些没有logging的选项。 目前的文档说使用.col-lg-x，但显然不工作，因为它只能适用于容器div，然后导致各种布局/浮动问题。 这是一个小提琴。 奇怪的是，在小提琴我甚至无法得到的forms组来resize。 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>
更改Bootstrappopup窗口的宽度
我正在devise一个使用Bootstrap 3的页面。我正在尝试使用带有placement: right的popup窗口placement: right在input元素上。 新的Bootstrap确保了如果你使用form-control你基本上有一个全宽input元素。 HTML代码看起来像这样： <div class="row"> <div class="col-md-6"> <label for="name">Name:</label> <input id="name" class="form-control" type="text" data-toggle="popover" data-trigger="hover" data-content="My popover content.My popover content.My popover content.My popover content." /> </div> </div> 因为他们没有任何宽度留在div中，所以popovers的宽度太低了。 我想要在左侧的input表单，并在右侧广泛的popover。 大多数情况下，我正在寻找一个解决scheme，我不必重写Bootstrap。 附带的JsFiddle。 第二个input选项。 没有使用jsfiddle很多，所以不知道，但尝试增加输出框的大小来查看结果，在较小的屏幕上甚至不会看到它。 http://jsfiddle.net/Rqx8T/
Bootstrap中的堆叠选项卡3
我试图在Bootstrap 3中使用Tab jquery插件实现左alignment的堆叠选项卡，其中选项卡垂直呈现在选项卡内容的左侧，而不是顶部。 当我尝试以下; <ul class="nav nav-tabs nav-stacked"> <li><a href="#tab1" data-toggle="tab">Tab 1</a></li> <li><a href="#tab2" data-toggle="tab">Tab 2</a></li> <li><a href="#tab3" data-toggle="tab">Tab 3</a></li> </ul> <div class="tab-content"> <div class="tab-pane fade" id="tab1"> Tab 1 content </div> <div class="tab-pane fade" id="tab2"> Tab 2 content </div> <div class="tab-pane fade" id="tab3"> Tab 3 content </div> </div> 选项卡堆叠在一起，但不能正确地呈现为左转，而只是将水平选项卡粘在一起。 标签内容在内容div中正确显示/隐藏。 这是在Bootstrap 2.x中使用tab-left和tab-right类来处理的，但是在Bootstrap 3中不推荐使用，并且看起来并没有被任何东西替代。 有谁知道在Bootstrap 3 […]
Bootstrap 3在菜单/导航栏中移动
我正在构build一个基于浏览器的移动应用程序，并决定使用Bootstrap 3作为devise的css框架。 Bootstrap 3在导航栏中提供了一个很好的“响应”function，如果它检测到关于浏览器分辨率的特定“中断点”，它将自动崩溃。 它在很多情况下工作。 但是最近你有没有注意到很多基于浏览器的移动应用程序如何将主要导航隐藏在屏幕左侧，并且当右上angular的切换图标被按下（切换）时，主要导航滑出进入屏幕的方式约2/3的权利？ 这是一个越来越stream行的解决scheme，通过移动设备上的基于浏览器的应用程序进行导航，我认为从理论上来说，修改引导程序css / js以适应这个版本的导航崩溃function应该是相当容易的。 这些function如何实现？ 似乎不应该做太多的修改。 我很想听听你对这个问题的想法/解决scheme。 另外，我认为这将是Bootstrap作为内置function实现的一个很好的长期解决scheme。 不幸的是，我还没有尝试过创build这个function，因为当我熟悉这些技术的时候，我主要是一个PHP / MySQL的开发人员，我相信一个像这样有用的function应该由具有我没有的洞察力的专家来构build作为前端开发者。
使用Bootstrap 3在AngularJS中表示Grid或Table的最佳方法？
我正在用AngularJS和Bootstrap 3创build一个应用程序。我想要显示一个包含数千行的表/网格。 什么是AngularJS＆Bootstrap的最佳可用控件，具有sorting，search，分页等function
Bootstrap 3手风琴button切换“data-parent”不起作用
我试图用折叠的数据属性button来创build一个使用Bootstrap 3的手风琴，没有手风琴的标记。 我看起来更清洁。 但是我不能让数据父项属性工作。 我想在开个问题的时候，所有的人都closures。 我正在阅读文档（ http://getbootstrap.com/javascript/#collapse-usage ），但仍然无法使其工作。 我使用下面的代码： <div class="accordion" id="myAccordion"> <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button> <div id="collapsible-1" class="collapse"> <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p> </div> <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button> <div id="collapsible-2" class="collapse"> […]
在引导程序3中单击导航栏元素外部时如何closures打开的折叠导航栏？
如何在点击导航栏元素外部时closures打开的折叠导航栏？ 目前，打开或closures它的唯一方法是单击navbar-togglebutton。 看到这里的例子和代码： 到目前为止，我已经尝试了以下似乎不起作用： jQuery(document).click(function() { }); jQuery('.navbar').click(function(event) { jQuery(".navbar-collapse").collapse('hide'); event.stopPropagation(); });
在Bootstrap 3 Navbar中集中品牌标志
我正在尝试实施Bootstrap 3导航栏，使品牌标识始终保持在中间位置。 这是代码： <div class="navbar navbar-fixed-top navbar-default"> <div class="navbar-inner"> <div class="container"> <button type="button" style="float: left;" class="pull-left btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" style="margin: 0; float: none;" href="#"> <img src="/Content/themes/nexthttp://img.dovov.comlogo.png" /></a> <div class="nav-collapse"> <ul class="nav"> <li> <a href="#">Item 1</a></li> <li> <a href="#">Item 1</a></li> <li> <a href="#">Item 1</a></li> </ul> […]
如何使用JavaScript检测Twitter Bootstrap 3的响应断点？
目前 ，Twitter Bootstrap 3具有以下响应断点：768px，992px和1200px，分别代表小型，中型和大型设备。 如何使用JavaScript检测这些断点？ 我想用JavaScript来监听屏幕更改时触发的所有相关事件。 并能够检测到屏幕是否适用于小型，中型或大型设备。 有没有事情已经完成？ 你有什么build议？
Bootstrap图标在本地加载，但在线时不能加载
基本上我有以下的HTML： <button class="disabled btn-primary btn" type="submit" disabled=""> <i class="glyphicon glyphicon-ban-circle"></i> Log in </button> 本地图标在button上显示的很好，但是当我在Windows Azure上运行时，我得到下面的button，带有一个奇怪的外观前缀，而不是图标： 看着这个，我意识到，当访问我的网站在本地浏览器将尝试加载文件：/Content/fonts/glyphicons-halflings-regular.woff（它成功），而当在线（在azure色），它会尝试载入：/fonts/glyphicons-halflings-regular.woff 为什么不把它在本地执行的/ Content前缀。 我正在使用标准的引导文件，这是完全相同的网站在本地和在线运行。 另外我以下列方式捆绑内容： bundles.Add(new StyleBundle("~/Content/bootstrapcss").Include( "~/Content/bootstrap/bootstrap.css")); 而文件结构看起来如下： 另外bootstrap正在寻找这样的文件： url('../fonts/glyphicons-halflings-regular.woff') 所以我会假设它会查找内容文件夹，而不是根目录，因为它当前驻留在Content / bootstrapcss文件夹中。
