twitter-bootstrap 相关问题

Bootstrap 3 页脚问题

我正在尝试获取一个页脚，如果没有足够的内容，它会粘在浏览器的底部，或者如果有足够的内容，超出浏览范围，它会粘在页面的底部...

Bootstrap 响应式表格在 iOS 设备上无法水平滚动

我有一个带有以下标记的表格： 正如文件...

在另一个 div 内引导模态窗口

我的引导模式工作正常。 我的问题是我需要将模态窗口（包括灰色背景）应用到网站的 div 上，而不是应用到正文上。 我有以下的str...

select2 4.0 和引导工具提示

有人使用 select2 4.0 使用 bootstrap 3.x 工具提示吗？我无法再在 select2 4.0 中显示工具提示（在 3.5.2 中运行良好）。这是 HTML 代码： 有人使用 bootstrap 3.x 工具提示获得 select2 4.0 吗？我无法再在 select2 4.0 中显示工具提示（在 3.5.2 中运行良好）。这是 HTML 代码： <select name="xxx" class="select-full tip" title="some_title"> 这是 JavaScript： $('.tip').tooltip({placement: "auto", html: true}); $(".select-full").select2({ width: "100%", }); 但是，select2 元素中不会显示任何工具提示（在“正常”选择中工作正常）。我在这个网站上找到了一些解决方案，但它们只适用于旧的 select2。 检查了近3天的代码后，我发现问题是最有可能是由select2附带的CSS文件中的这一行引起的： .select2-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px} 如果我删除这一行，工具提示可以正常工作，但 select2 元素看起来不太好（显示两个选择而不是一个）。 我还找到了部分解决方案。添加这个额外的代码片段可以解决问题，但只有在 JavaScript 本身定义了 title 时它才有效（如果从 JS 代码中删除“title”元素则不起作用）： $(".select2-container").tooltip({ title: "some static title"}); 添加了实时示例 - https://jsfiddle.net/8odneso7/ 使用引导文档和一些开发工具，我找到了解决方案。 需要在 select2 容器上创建工具提示，因为原始标签被 select2 隐藏了。原始标题属性被重新使用，您可以根据需要在服务器上渲染它。 $(".select2-container").tooltip({ title: function() { return $(this).prev().attr("title"); }, placement: "auto" }); 工作示例：https://jsfiddle.net/8odneso7/2/ 需要放置“auto”，因为顶部的选择和正文之间没有填充/边距，至少在 jsfiddle 中没有。 如果您想删除选项上的工具提示： $(".select2-selection span").attr('title', ''); 在 Bootstrap 5.2.3 和 Select2 4.0.13 中，对早期答案的以下修改通过使用父元素的委托解决了必须等待 Select2 完全初始化的问题： $('#entrySelector').select2({ ... }) .parent().tooltip({ selector: '.select2-container', trigger : 'hover', title: function() { return $(this).prev().attr('title'); } });

需要删除 YouTube 播放器暂停时出现的“.ytp-pause-overlay”

我正在使用名为 Vimuse 的视频播放器 (http://codecanyon.cosmo-coder.com/vimuse/youtube.html)。我需要找到一种方法来删除用户暂停 vi 时出现的“相关/建议视频”...

bootstrap 3.3.7 模式不显示 html

我有以下代码，$('.modal).modal('show')似乎将html添加到DOM但没有显示。我注意到不透明度已更改为 0.5 这是代码 我有以下代码， $('.modal).modal('show') 似乎将 html 添加到 DOM 但没有显示。我注意到不透明度已更改为 0.5 这是代码 <div class="modal fade" id="editMezalta" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="exampleModalLabel">New message</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="control-label">Recipient:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="control-label">Message:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Send message</button> </div> </div> </div> 看起来工作没有问题。您是否记得包含相关的 Bootstrap JS 和 CSS 文件？ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <button data-target="#editMezalta" data-toggle="modal">Open Modal</button> <div class="modal fade" id="editMezalta" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="exampleModalLabel">New message</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="control-label">Recipient:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="control-label">Message:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Send message</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <button data-target="#editMezalta" data-toggle="modal">Open Modal</button> <div class="modal fade" id="editMezalta" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="exampleModalLabel">New message</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="control-label">Recipient:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="control-label">Message:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Send message</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

如何从 Bootstrap 5 范围输入中删除蓝色轮廓

我尝试使用无阴影删除轮廓，但它不起作用还有其他解决方案吗 网页代码 范围示例 我尝试使用无阴影删除轮廓，但它不起作用，还有其他解决方案吗 HTML代码 <label for="customRange1" class="form-label">Example range</label> <input type="range" class="form-range" id="customRange1"> CSS代码 input[type="range"]{ outline: none; border: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } 我通过查看 bootstraps src 中的文件 _custom-forms.scss 得到了答案。 这就是制作实时片段的方式： input[type="range"]:focus::-webkit-slider-thumb { box-shadow: none !important; } input[type="range"]:focus::-moz-range-thumb { box-shadow: none !important; } input[type="range"]:focus::-ms-thumb { box-shadow: none !important; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <label for="customRange1" class="form-label">Example range</label> <input type="range" tabindex="-1" class="form-range" id="customRange1"> 感谢您的回答，它节省了我漫长的搜索时间。

bootstrap 如何在其文档中的 div 上创建“示例”选项卡？

我尝试查看代码，但无法确定如何将其放置在 div 上方。另外，谷歌搜索“div 上的选项卡”、“div 上的嵌套选项卡”似乎没有显示任何相关内容，所以我的术语...

dataTables - 无法使用水平滚动和固定列来完成其工作。似乎到处渲染都不同。我做错了什么？

我花了几个小时试图弄清楚这一点。我需要制作一张与此链接中显示的表格几乎相同的表格： https://datatables.net/extensions/fixedcolumns/ W...

Bootstrap Modal 在通过 Javascript 触发时未将模态开放类添加到主体

我的页面上有一个模态框，其内容会根据单击两个按钮中的哪一个而发生变化（ 的值会发生变化）。为了更好地添加功能，我设置了一个附加块...

CSS：如何使用 calc(100% - 20px) 获取一个区域来填充除固定宽度元素以外的所有区域？

对于令人费解的标题表示歉意。这是我的小提琴： http://jsfiddle.net/PTSkR/152/ 如果将结果窗格拖得更宽，您可以看到蓝色区域跳起来。他们应该总是...

如何在 Twitter Bootstrap 模式中启用转义键关闭功能？

我按照 Twitter Bootstrap 模式在其主文档页面上的说明进行操作，并使用了提到的 data-keyboard="true" 语法，但转义键不会关闭模式窗口。 ...

使用 ESC 关闭引导模式

我正在使用 2 个模态，第一个模态包含一个表单，第二个模态在表单中发生错误时显示。第二个模式仅包含带有错误消息的文本。 我的问题是，当第二个模式出现时，我预...

引导模式未在“esc”上关闭

我有一个常规的 Bootstrap 3 模式窗口： ... 我有一个常规的 Bootstrap 3 模态窗口： <div id="test_modal" class="modal animated fade" role="dialog" data-keyboard="true" tabindex="-1"> 但在键盘上 ESC 仅在 after 在模态中单击一次后才有效。只需按 ESC 即可让光标消失，只有在“单击”时才会返回。 有人可以向我解释并提出建议吗？ 谢谢。 根据 Bootstrap 3 Modal 文档： 由于 HTML5 定义其语义的方式，autofocus HTML 属性在 Bootstrap 模式中不起作用。要达到相同的效果，请使用一些自定义 JavaScript： $('#myModal').on('shown.bs.modal', function () { $('#myInput').focus() })

Bootstrap：左对齐按钮文本

如何在引导按钮内将文本左对齐？我有多个带有不同长度文本的按钮，并且所有按钮都需要具有相同的宽度。我已经使用类 col 实现了这一目标...

将.form-text宽度限制为输入的宽度

如何根据上述输入的宽度来限制.form-text的宽度？ 我想在 Bootstrap 应用程序中使用 .form-text 布局 以获得一些额外的

使用带有浮动标签的输入组时不显示引导验证反馈

我发现可以将浮动标签与输入组结合起来。但是，我不知道如何让反馈正确显示。 我发现可以将浮动标签与输入组结合起来。但是，我不知道如何让反馈正确显示。 <div class="input-group has-validation"> <div class="form-floating"> <input name="token" placeholder="Enter your admin token" type="password" class="form-control is-valid" value="some token" /> <label>Access Token</label> </div> <button type="submit" class="btn btn-success">Log in</button> <div class="valid-feedback">Looks good!</div> </div> 有效反馈的引导 CSS 只是说： .valid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: .875em; color: var(--bs-form-valid-color); } 为什么我想在这里将显示设置为无？ 当我只使用没有浮动标签的输入组时，这似乎工作正常。我正在使用最新版本的bootstrap（v5.3.2） 反馈必须与输入元素位于同一div上： <div class="input-group has-validation"> <div class="form-floating"> <input name="token" placeholder="Enter your admin token" type="password" class="form-control is-valid" value="some token" /> <label>Access Token</label> <div class="valid-feedback">Looks good!</div> </div> <button type="submit" class="btn btn-success">Log in</button> </div>

显示和隐藏类（onClick）

上传我在按钮上使用 Bootstrap 3 中的字形图标，该按钮使用 CSS3 关键帧旋转，我想要（.隐藏）此类，直到单击按钮，然后它将出现/显示，然后旋转。 ..

为什么我的网站首先加载并显示页面底部？

我似乎无法弄清楚这一点，希望大家能帮忙。 当我加载网站时，它会在页面底部打开。我以为可能是平滑滚动js脚本或者视差sc...

引导箱警报不起作用

尝试使用 Bootbox 确认，但我开始使用 bootbox.alert() 进行测试，但它不起作用。 我确认我有 bootstrab.css、bootstrab.js、jquery.js 和 -bootbox.min.js 包含在...