twitter-bootstrap 相关问题

我试图在单击时显示齿轮图标和下拉菜单。这是我的代码，但下拉菜单没有出现。有什么想法我做错了什么吗？我试图在单击时显示齿轮图标和下拉菜单。这是我的代码，但下拉菜单没有出现。有什么想法我做错了什么吗？ <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> </head> <body> <div class="dropdown"> <h4> Drop down menu test: <i class="bi bi-gear" style="cursor: pointer;" data-toggle="dropdown"></i> </h4> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li>  </ul> </div> </body> 您有一些与 docs 和良好的语义标记不相符的内容：切换器应该是一个按钮。标题不是可点击的元素，不应该这样使用，以实现可访问性。下拉菜单必须是其切换器的下一个兄弟。这意味着将其放入标题元素内。不幸的是，从语义角度来看这也很糟糕，因此请考虑重构布局来解决这个问题。不要省略文档中显示的 ARIA 属性，也是为了可访问性。 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> </head> <body> <div class="dropdown"> <h4> Drop down menu test: <button id="dropdownBtn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="bi bi-gear"></i></button> <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownBtn"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </h4> </div> </body> 这是我的“最终”代码，包含@isherwood 的更改 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> </head> <body> <div class="d-flex align-items-center"> <h4 style="display: inline;">Drop down menu test:</h4> <div class="dropdown" style="display: inline-block;" > <button id="dropdownBtn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <i class="bi bi-gear"></i> </button> <ul class="dropdown-menu" aria-labelledby="dropdownBtn"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div> </div> </body>

twitter-bootstrap twitter-bootstrap-3

回答 2 投票 0

为什么我的 Bootstrap 列是堆叠的而不是并排的？

它是简单的div容器，div row，div col-md-9，div col-md-3。该代码在过去 8 年或更长时间内一直有效，但突然间就失效了。这是 R 语言中最终批准信的顶部部分...

twitter-bootstrap razor printing

回答 1 投票 0

右侧的引导下拉菜单

我正在尝试更改顶部导航引导菜单的每个项目从左到右的方向，以及文本向右对齐；你能告诉我如何为其生成 CSS 代码吗？我....

css twitter-bootstrap

回答 1 投票 0

在引导日期时间选择器中禁用时间

我在我的网络应用程序中使用引导日期时间选择器，由 PHP/HTML5 和 JavaScript 制作。我目前正在使用这里的一个： http://tarruda.github.io/bootstrap-datetimepicker/ 当我使用时...

javascript html twitter-bootstrap

回答 22 投票 0

更改 Bootstrap 中的组合框插入符图标大小

我使用 bootstrap 3 框架创建了一个简单的表单。现在我想增加选择框中组合框插入符号图标（如图所示）的大小。 [![在此处输入图像描述][1]][1]...

html twitter-bootstrap forms

回答 1 投票 0

模式上的DatetimePicker未完全显示

尽管我尝试在 Bootstrap v3.3.7 模型中显示日期时间选择器，但它并未完全显示。日期时间选择器部分可见，部分隐藏；同样，这个问题

html css twitter-bootstrap bootstrap-modal bootstrap-datetimepicker

回答 2 投票 0

jQuery UI 可排序和 Bootstrap 网格

我在 BS 中创建了一个仪表板网格，并希望能够使用 Sortable 拖动图块 - 这本身工作正常，但行为确实不可预测。我有一个 6 x 4 网格，对于

twitter-bootstrap jquery-ui jquery-ui-sortable

回答 3 投票 0

Blazor Bootstrap - 单击外部元素时下拉列表不会关闭

在我的 Blazor Server 应用程序中，我无法使默认的 Bootstrap 下拉行为起作用：当我单击菜单 div 之外的任何位置时，我需要下拉菜单消失。我尝试过 @onfocusout 但如果我...

c# twitter-bootstrap asp.net-core bootstrap-4 blazor

回答 3 投票 0

数据切换选项卡无法下载传单地图

我正在使用选项卡来显示清晰的内容，但其中一个选项卡停止下载，因为它位于数据切换选项卡中。这是一张传单地图。这是代码：导航栏代码：我正在使用选项卡来显示清晰的内容，但其中一个选项卡停止下载，因为它位于数据切换选项卡中。这是一张传单地图。这是代码：导航栏代码： <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#home">Données principales</a></li> <li><a data-toggle="tab" href="#carte">Carte</a></li> </ul> <div class="tab-content"> <div id="home" class="tab-pane fade in active">Lorem ipsum</div> <div id="carte" class="tab-pane fade"> **//see script below\\** </div> </div> 脚本： <div id="carteBenef"></div> <script type="text/javascript"> $(document).ready(function () { var map = new L.Map('carteBenef'); var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', subDomains = ['otile1', 'otile2', 'otile3', 'otile4'], cloudmadeAttrib = 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>, <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>'; var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib, subdomains: subDomains}); var iades = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>) map.addLayer(cloudmade).setView(iades, 15); var benefLocation = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>); var benef = new L.Marker(benefLocation); map.addLayer(benef); benef.bindPopup("<?php echo htmlspecialchars($beneficiaire->nom) . ' ' . htmlspecialchars($beneficiaire->prenom); ?>").openPopup(); }); </script> 地图在我将其放入选项卡之前就已经出现了，有人知道为什么它现在不起作用吗？如果您的 Leaflet 地图在调整浏览器窗口大小后突然正常工作，那么您会遇到经典的“地图初始化时地图容器大小无效”：为了正常工作，Leaflet 会在初始化时读取地图容器大小地图(L.map("mapContainerId"))。如果您的应用程序隐藏该容器（通常通过 CSS display: none;，或某些框架选项卡/模态/其他......）或稍后更改其尺寸，Leaflet 将不会知道新的尺寸。因此它不会正确渲染。通常，它仅下载它认为显示的容器部分的图块。如果容器在地图初始化时完全隐藏，则这可以是左上角的单个图块。将地图容器嵌入“选项卡”或“模态”面板时经常会出现此错误，可能使用流行的框架（Bootstrap、Angular、Ionic 等）。 Leaflet 监听浏览器窗口大小调整事件，并在事件发生时再次读取容器大小。这解释了为什么地图突然在调整窗口大小时起作用。您还可以在显示选项卡面板时通过调用 map.invalidateSize() 来手动触发此更新（例如，在选项卡按钮单击上添加侦听器），至少在第一次以正确的尺寸渲染容器时是如此。至于实现选项卡按钮单击侦听器，请对该主题执行新的搜索：对于大多数流行的框架，您应该有足够的可用资源。首先，感谢@ghybs 对为什么在这些情况下传单地图未正确显示的良好解释。对于那些尝试@ghybs的答案失败的人，您应该尝试调整浏览器的大小，而不是调用地图对象的方法： window.dispatchEvent(new Event('resize')); 正如@MarsAndBack所说，此修复可能会导致Leaflet的invalidateSize提供的平移/动画/等功能出现问题。我遇到这个问题是因为我使用了modal bootstarp。无论如何它都没有解决。我尝试了 map.invalidateSize() 和 window.dispatchEvent(new Event('resize')); 但没有修复。最终解决了这个问题： $('#map-modal').on('shown.bs.modal', function(event) {}); 'shown.bs.modal'事件意味着当模态完全加载并且大小没有任何混淆时，现在在其中编写您的代码。对于像我这样的人，无法通过珍贵的@ghybs 解释（map.invalidateSize()）解决这一挑战，并且能够通过@gangai-johann 来解决这一挑战，您仍然有机会以正确的方式做到这一点。将无效指令放入 setTimeout 内，因为分派该指令可能为时过早。 setTimeout(() => { this.$refs.mymap.mapObject.invalidateSize() }, 100) 请参阅 https://stackoverflow.com/a/56364130/4537054 答案以获取详细说明。

javascript twitter-bootstrap tabs toggle leaflet

回答 4 投票 0

所有突然的 2 个工作引导列都堆叠在一起，而不是并排放置在引导行中

首先，我在stackoverflow上搜索了类似的问题。我的问题没有花哨的引导代码。它是简单的div容器，div row，div col-md-9，div col-md-3。该代码在过去 8 年中一直有效...

twitter-bootstrap razor printing

回答 1 投票 0

如何通过css、js或jquery将内容隐藏在透明标题后面？

我制作了一个标题，由带有徽标和社交链接的顶部透明部分以及顶部有填充的导航栏组成。这是我制作的透明标题。在导航栏上我有...

javascript jquery css twitter-bootstrap

回答 3 投票 0

Bootstrap 的 Scrollspy：页面重新加载后滚动具有不同偏移量时的偏移量

我的 SPA 网站（单页应用程序）上的导航滚动间谍有问题。当我在网站上正常滚动时，偏移量是正确的，并且导航获得正确的活动类。现在当我