Questions tagged «twitter-bootstrap»

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

8
如何知道哪个HTML元素导致垂直滚动条
我正在学习Bootstrap。在“入门”菜单上，给出的模板很少。我在玩那个。一个示例是有关固定页脚的。我使用了上一个示例中的nav，并希望使用固定的页脚进行调整。但是垂直滚动条即将到来。我正在寻找引起垂直滚动条的元素。 这是HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- Le styles --> <link href="css/bootstrap.css" rel="stylesheet"> <style type="text/css"> /* Sticky footer styles -------------------------------------------------- */ html, body { height: 100%; /* The html and body elements cannot have …
6
更改FontAwesome图标的字体粗细？
我想减轻其中一个FontAwesome图标的重量-比我使用的字体重得多。目前的样子： ： 丑陋吧？因此，我尝试按以下方式重置font-weight： .tag .icon-remove { font-weight: 100; } 该属性在CSS中似乎已正确设置，但没有效果-图标看起来和以前一样重。我也试着font-weight: lighter和-webkit-text-stroke-width: 1px没有效果。 有什么办法可以减轻图标的重量？文档说“您可以使用CSS字体样式进行的任何操作，都可以使用Font Awesome进行处理”，但是我不知道该怎么做。
6
禁用Bootstrap中的链接
第一个示例不起作用。我需要始终有一个列表来禁用链接吗？还是我的第一个演示有什么问题？ <a class="disabled" href="#">Disabled link</a> <ul class="nav nav-pills"> ... <li role="presentation" class="disabled"><a href="#">Disabled link</a></li> ... </ul> https://jsfiddle.net/7y0u2amy/
11
引导程序：展开一个区域时折叠其他区域
我正在制作Rails应用程序，并试图实现与Twitter的Bootstrap崩溃相关的特定功能。当我解释时，请忍受我。 我目前有以下观点： 单击这些按钮中的每个按钮时，它们的数据切换div都会展开。视图设置如下： <button class="btn dropdown" data-toggle="collapse" data-target="#keys"><i class="icon-chevron-right"></i> Keys <span class="badge badge-info pull-right"><%= @app.keys.count %></span></button> <button class="btn dropdown" data-toggle="collapse" data-target="#attrs"><i class="icon-chevron-right"></i> Attributes</button> <button class="btn dropdown" data-toggle="collapse" data-target="#edit"><i class="icon-chevron-right"></i> Edit Details</button> <div class="collapse indent" id="keys"> <!--content--> </div> <div class="collapse indent" id="attrs"> <!--content--> </div> <div class="collapse" id="edit"> <!--content--> </div> 我这样设置它们，因为我希望按钮连续并排放置。如果我将按钮移动到视图的正上方，它们会展开/折叠，那么按钮会堆叠在一起。 因此，我的最终目标是使三个按钮并排放置，并使它们合拢并展开各自的部分。当前的设置有效，但是有点尴尬。例如，如果某人先展开键部分，然后再展开属性部分，则他们必须在键部分下面滚动。 …
9
单击时关闭Bootstrap下拉菜单
我将表单放在引导程序下拉列表中，但是当我单击表单中的任何字段时，下拉列表消失了。我有这段代码，但是我不知道在哪里放置它以防止下拉列表消失。 $(function test() { // Setup drop down menu $('.dropdown-toggle').dropdown(); // Fix input element click problem $('.dropdown input, .dropdown label').click(function(e) { e.stopPropagation(); }); }); 有人可以告诉我该放在哪里吗？我在bootstrap-dropdown中尝试过，在HTML中尝试过，但仍然无法正常工作。
15
如何启用模式内的内容滚动？
我正在尝试将大量文本放入使用Twitter Bootstrap创建的模式框中，但是我遇到了一个问题：该内容拒绝滚动。 我尝试添加overflow:scroll和overflow-y:scroll，但无济于事；只会导致它显示滚动条，而没有实际启用滚动。 其背后的原因是什么，我该怎么办？
7
使用Twitter Bootstrap将页脚固定在页面底部
我有一些网页内容不多，页脚位于页面中间，但我希望它位于页面底部。 我已将所有页面放在“持有人”中 #holder { min-height: 100%; position:relative; } 然后在我的页脚中使用以下CSS ul.footer { margin-top: 10px; text-align: center; } ul.footer li { color: #333; display: inline-block; } #footer { bottom: -50px; height: 50px; left: 0; position: absolute; right: 0; } 我的页脚的html <div class="container"> <div class="row"> <div class="span12"> <div id="footer"> <ul class="footer"> <li>Website built …
3
尝试使引导程序模态更宽
我正在使用此代码，但模态太薄： <div class="modal fade bs-example-modal-lg custom-modal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" id="myModal"> <div class="modal-dialog modal-lg"> <div class="modal-content modal-lg"> <div class="modal-header modal-lg"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Solutions</h4> </div> <div class="modal-body modal-lg"> <p>Content</p> </div> </div> </div> </div> 看起来是这样的： 我怎样才能使这种模式更加广泛？理想情况下，我希望它的宽度大约是原来的两倍，因为它现在太瘦了。
11
如何在Angular 2中设置Bootstrap导航栏“活动”类？
如何在Angular 2中设置Bootstrap导航栏“活动”类？我只找到Angular 1方式。 当我转到关于页面时，将添加class="active"到关于，然后class="active"在主页上删除。 <ul class="nav navbar-nav"> <li class="active"><a [routerLink]="['Home']">Home</a></li> <li><a [routerLink]="['About']">About</a></li></li> </ul> 谢谢
9
Bootstrap模式对话框中的Google Maps自动完成结果
我在Twitter Bootstrap模态对话框中有一个Google Maps自动完成输入字段，并且不显示自动完成结果。但是，如果按向下箭头键，它将选择下一个自动完成结果，因此自动完成代码似乎正常工作，只是结果显示不正确。也许它隐藏在模态对话框的后面？ 这是屏幕截图： 在自动完成字段中输入内容无济于事 按向下箭头键可获得第一个结果 和代码： <div class="modal hide fade" id="map_modal"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal">×</button> <div class="control-group"> <label class="control-label" for="keyword">Cari alamat :</label> <div class="controls"> <input type="text" class="span6" name="keyword" id="keyword"> </div> </div> <div id="map_canvas" style="width:530px; height:300px"></div> </div> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#" class="btn btn-primary">Save changes</a> …
6
在Bootstrap Modal上捕获关闭事件
我有一个Bootstrap Modal来选择事件。如果用户单击X按钮或模式外部，则希望将其发送到默认事件。如何捕获这些事件？ 这是我的HTML代码： <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content event-selector"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> <center><h1 class="modal-title event-selector-text">Select an Event</h1><center> </div> <div class="container"></div> <div class="modal-body"> <div class="event-banner"> <a href="/?event=1"> <img src="<?php echo IMAGES_EVENT1_LOGO; ?>" width="100%"> </a> </div> <div class="event-banner"> <a href="/?event=2"> <img src="<?php echo IMAGES_EVENT2_LOGO; ?>" width="100%"> …
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.