twitter-bootstrap 相关问题

使用 PHP 的 Bootstrap 模式中的动态内容

我在表格中有以下，其中包含一个按钮： 我的表格中有以下 <td>，其中包含一个按钮： <td class="text-center"> <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" id="#exampleModal'.$objResult['id'].'" data-bs-target="#exampleModal'.$objResult['id'].'">click me</button> </td> 请注意，该按钮将 PHP 变量传递给模式。下面我有一个 Bootstrap 模式，应该由上面的按钮触发（使用 PHP 变量）： <div class="modal fade" id="exampleModal<?= $objResult['id'] ?>" tabindex="-1" aria-labelledby="exampleModalLabel<?= $objResult['id'] ?>" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel<?= $objResult['id'] ?>">Classi docente</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body" align="left"> **HERE I HAVE SOME PHP CODE WHICH USES $objResult['id']** </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button> </div> </div> </div> </div> 按钮不会触发任何操作。 控制台调试显示： Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop') 可能是模态中错误的id导致的？有什么提示吗？ 您的按钮与模态框具有相同的 id。更改它，或者如果不需要则删除它。

Bootstrap 4：如何内联应该隐藏在小屏幕上的文本？

对于这个特定的应用程序，我试图在较小的屏幕上隐藏文本，只显示左侧的图标（来自 font Awesome 的评论图标）： 对于这个特定的应用程序，我试图在较小的屏幕上隐藏文本，只显示左侧的图标（来自 font Awesome 的评论图标）： <a id="newCommentLink" href="#"> <i class="fa fa-comments text-secondary"></i> <span class="d-none d-md-block">Comment</span> </a> 从上面的代码中可以看到，我想要的是文本“评论”在移动屏幕（xs 和 sm 尺寸）上隐藏，因此它只显示在中到大尺寸的屏幕上。但是，此 HTML 代码将在图标下方显示文本“注释”，而不是在图标旁边。我无法内联图标和文本。有人知道如何解决这个问题，使文本与图标内联显示吗？ 几个选项： 只需在 d-flex 上使用 a <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <a class='d-flex' id="newCommentLink" href="#"> <i class="fa fa-comments text-secondary"></i> <span class="d-none d-md-block">Comment</span> </a> 使用 d-md-inline-block / d-md-inline-flex 代替 d-md-block <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <a id="newCommentLink" href="#"> <i class="fa fa-comments text-secondary"></i> <span class="d-none d-md-inline-block">Comment</span> </a>

Bootstrap Bundle JS 脚本破坏 Laravel 中的下拉菜单

我对 Laravel 比较陌生，目前正在我的 Ubuntu 2024 系统上使用 Apache2。 我最近安装了 Laravel UI，它带有一个漂亮的导航栏。我做了一些修改，但是...

Bootstrap Flex 布局在使用溢出隐藏或溢出自动时会切断阴影

考虑以下使用 Bootstrap 类的标记： 该布局由使用 flex-row 左右放置的两张卡片组成。 使用 flex-

引导菜单中的下拉菜单显示堆叠在输入框上，而不是旁边

我正在使用 boostrap v. 5.2.3 改编一个网络程序。页面右边缘有一个输入框，我想在其左侧添加一个下拉菜单。我使用了这段代码： 我正在使用 boostrap v. 5.2.3 改编一个网络程序。页面右边缘有一个输入框，我想在其左侧添加一个下拉菜单。我使用了这段代码： <div class="col-1 pe-3"> <select name="display_format" id="display_format" class="col-1 form-control form-control-sm"> <option value="display">Display</option> <option value="output">Output</option> </select> <input id="select_year" type="number" class="col-2 form-control form-control-sm"> </div> 如果可行，但下拉列表会堆叠显示在输入框上，而不是之前，最好在其间留有某种空间。 有人可以将我推向正确的方向吗？ 我尝试查看引导文档，但它非常广泛，我无法找到，pe-3是什么意思... 感谢您的帮助！ p用于填充，e用于结束，3是尺寸。 简而言之：右侧“3 padding”。 尺寸文档 您可以使用输入组和下拉菜单： <div class="input-group mb-3"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"></button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Separated link</a></li> </ul> <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> 或者带有选择的 flexbox，如您的示例中所示，在容器元素中使用这些类：d-flex flex-row flex flex-nowrap。 <div class="d-flex flex-row flex flex-nowrap" style="gap: 15px;"> <select name="display_format" id="display_format" class="col-1 form-control form-control-sm"> <option value="display">Display</option> <option value="output">Output</option> </select> <input id="select_year" type="number" class="col-2 form-control form-control-sm"> </div> flex-nowrap 防止换行并强制元素彼此相邻。 gap 定义弹性盒内元素之间的间距。

Bootstrap 4 水平文本对齐在 <span>

我有以下代码： 🐯 我有以下代码： <div class="card" > <div class="card-block"> <h4 class="card-title"> <span class="text-left">🐯</span> <span class="text-right">Drago</span> </h4> <span class="card-text"> Location: ???<br> District: ???<br> Last updated: Tue, May 8th 2018 </span><br><br> <div class="card-buttons" class="text-center"> <a href="#" class="btn btn-primary btn-sm"><i class="fas fa-user-cog"></i> Edit User</a> <a href="#" class="btn btn-primary btn-sm"><i class="fas fa-home"></i> Manage Addresses</a> <a href="#" class="btn btn-danger btn-sm"><i class="fas fa-trash-alt"></i> Delete</a> </div> </div> </div> 我正在尝试在 Bootstrap 4 中制作一张卡片。 我确实希望 <h4> 中的表情符号向左对齐，其后面的文本向右对齐。我正在尝试这样做： <h4 class="card-title"> <span class="text-left">🐯</span> <span class="text-right">Drago</span> </h4> 但这不起作用，我明白： 我也尝试在没有引导类的情况下做到这一点。使用 style="text-align: left" 和 style="text-align: right"。但这似乎也不起作用。 当我使用 <div> 时，水平对齐效果很好。我仅在显示属性设置为 <span> 和 <div> 的 inline-block 和 inline-flex 时遇到此问题。 您会使用 float-right，因为 .card-title 是 display:block... <h4 class="card-title"> <span>🐯</span> <span class="float-right">Drago</span> </h4> https://www.codeply.com/go/CMrl4JydKp 使用 text-right 适用于内联元素的父元素。 更新：如果您尝试在 Bootstrap 5 中实现此目的，则该类将重命名为 float-end：https://getbootstrap.com/docs/5.0/utilities/float/ .card-title { display: flex; flex-wrap: wrap; } .text-right { margin-left: auto; } 例如，您可能希望向卡片标题添加自定义类，因此您通常不会调整所有卡片标题。 小提琴：https://jsfiddle.net/2xv2t12c/ 希望这有帮助！ BS4 更新：- 为响应式浮动添加了 .float-{sm,md,lg,xl}-{left,right,none} 类，并删除了 .pull-left 和 .pull-right 因为它们对 .float 来说是多余的-向左和.float-right。 所以使用 float right 并且我在 h4 下添加了一个 br 标签，这样下面的跨度就不会溢出到 h4 中。 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="card"> <div class="card-block"> <h4 class="card-title "> <span class="float-left">🐯</span> <span class="float-right">Drago</span> </h4> <br/> <span class="card-text"> Location: ???<br> District: ???<br> Last updated: Tue, May 8th 2018 </span><br><br> <div class="card-buttons" class="text-center"> <a href="#" class="btn btn-primary btn-sm"><i class="fas fa-user-cog"></i> Edit User</a> <a href="#" class="btn btn-primary btn-sm"><i class="fas fa-home"></i> Manage Addresses</a> <a href="#" class="btn btn-danger btn-sm"><i class="fas fa-trash-alt"></i> Delete</a> </div> </div> </div>

堆叠式引导程序进度，通过工具提示显示多个范围

我正在尝试创建一组堆叠的进度控件来显示不同计算范围和数据点之间的关系。下图是一个粗略的示例。共有三个范围和一个...

在 splide 之外使用 SplideJS 箭头

我正在构建这个带有幻灯片的引导页面（移动视图）。 对于设计来说，将箭头放在幻灯片本身之外比尝试将箭头移动到正确位置要容易得多...

使引导模式可拖动并保持背景可用

我正在尝试使引导模式可拖动到页面上的任何位置，并且当模式打开时，我希望用户能够继续使用该页面。 我能够使用 j 使模式可拖动...

bootstrap v4.5 中的 justify-content-center 类不起作用

我正在尝试为我正在为本地企业设计和编码的网站创建一个响应式联系我们部分，但是 bootstrap v4.5 中的 justify-content-center 类并未将图标居中...

如何在 Bootstrap 3 中使用固定标题（导航栏）向下滚动表格行时将表格标题（thead）粘在顶部？

带有固定导航栏的引导布局。表格中有很多行。 问题？当我滚动页面导航栏时，它会在那里，因为它是固定的。当我滚动更多时，我希望表格标题是...

引导 CSS 未加载

我一直在尝试 Twitter Bootstrap，但遇到了无法解决的问题。基本上，我有一个非常简单的 HTML 文件（基于本教程的开头：http://www.sitepoint...

在 Bootstrap 列之间添加边距

我在 Bootstrap 5 中有如下列。 第 1 栏 ... 我在 Bootstrap 5 中有如下列。 <div class="row"> <div class="col-md-3 mb-3 border rounded"> <p>Column 1</p> </div> <div class="col-md-3 mb-3 border rounded"> <p>Column 2</p> </div> <div class="col-md-3 mb-3 border rounded"> <p>Column 3</p> </div> <div class="col-md-3 mb-3 border rounded"> <p>Column 4</p> </div> </div> 有了边框，我可以看到列之间没有间距。所以我将顶级 <div> 更改为 class="row gap-3"。 这正确地在每列之间留出了一个空格。然而，它也会导致第四列换行。 有没有什么方法可以在每列之间放置一个空格，但不改变每行的列数？ 使用间隙与列 对固定大小的列使用 gap 会导致不必要的列换行。使其发挥作用的关键是使用可根据间隙调整的自动调整大小的列。 通过使用 col 而不是 col-3，列会调整以适应可用空间。如果列需要在特定的断点处翻转到行，则使用不带列宽的col-<breakpoint>，例如col-lg （该演示未指定断点，因此它可以在代码片段中运行。） /* debug only */ .row>div { background: lightgray; border: thin solid black; } <div class="row gap-3 text-center"> <div class="col">C1</div> <div class="col">C2</div> <div class="col">C3</div> <div class="col">C4</div> </div> <hr> <div class="row gap-3 text-center"> <div class="col">C1</div> <div class="col">C2</div> <div class="col">C3</div> <div class="col">C4</div> <div class="col">C5</div> <div class="col">C6</div> </div> <!-- These fixed column alternatives have unwanted column wrapping <div class="row row-cols-4 gap-3 text-center"> <div>C1</div> <div>C2</div> <div>C3</div> <div>C4</div> </div> <div class="row gap-3 text-center"> <div class="col-3">C1</div> <div class="col-3">C2</div> <div class="col-3">C3</div> <div class="col-3">C4</div> </div> --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

从代码隐藏中打开 Bootstrap Modal

有人知道如何从代码隐藏中打开 Twitter 引导模式吗？ 我想根据保存时的一些要求打开模式。类似于“嘿，没有库存，请拿起...

单击外部时如何隐藏可折叠导航栏菜单？

我有一个可折叠的导航栏菜单： ..菜单项.. 我想在用户点击时隐藏它

如何在单击外部时隐藏可折叠导航栏菜单（Bootstrap 5）？

我有一个可折叠的导航栏菜单： ..菜单项.. 我想在用户点击时隐藏它

单击时启动引导选项卡关闭活动

我有以下代码： 第一块 &l... 我有以下代码： <div id="action_wrap"> <div id="action_nav"> <div class="action" data-target="#content1" data-toggle="tab">First Block</div> <div class="action" data-target="#content2" data-toggle="tab">Second Block</div> <div class="action" data-target="#content3" data-toggle="tab">Third Block</div> </div> <div id="action_items"> <div class="action_text collapse" id="content1"> <p>Content 1</p> <span class="close">Close</span> <div class="clearfix"></div> </div> <div class="action_text collapse" id="content2"> <p>Content 2</p> <span class="close">Close</span> <div class="clearfix"></div> </div> <div class="action_text collapse" id="content3"> <p>Content 3</p> <span class="close">Close</span> <div class="clearfix"></div> </div> </div> </div> 并使用 Twitter Boostrap 的“Tab”脚本，它工作得很好。我为关闭按钮和导航按钮添加了一些看起来非常令人讨厌的脚本来获取活动类，如下所示： $(".action").click(function () { $(this).parent().children().removeClass("active"); $(this).addClass("active"); $(this).parent().addClass("active"); }); $(".close").click(function () { $(this).parent().parent().parent().children().removeClass("active"); $(this).parent().parent().parent().children().children().removeClass("active"); }); 虽然不多，但嗯，它正在工作。 我不能做的是通过单击活动导航 div 来关闭 Bootstrap 的选项卡。 这意味着如果我在 #content1 上单击第一个带有数据目标的 .action div，则 .action_text#content1 将获得 .active 类，我单击的 .action div 也将获得。我想要的是 .action.active data-target="#content1" 单击删除 .tab() 的类“active”并且其本身相同。 我在另一个线程中发现更改 Bootstrap 的 Tab 脚本中的代码 $(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { e.preventDefault() $(this).tab('show') }) 但似乎每次我编辑它时，它都会破坏整个事情。我尝试像这样添加 if 语句 $(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { if ($(this).hasClass('active')) { $(this).tab().removeClass('active'); $(this).removeClass('active'); } else { e.preventDefault() $(this).tab('show') } }) 但是整个事情都停止了。 首先，您应该尽量避免更改 Bootstrap 本机代码，否则您可能会失去升级到未来版本的能力。 关于您的问题，您可能会像我一样遇到一些事件并发问题... 如果您想在单击选项卡切换时关闭活动选项卡，请查看此处： http://bootply.com/61835（归功于katie，我不是这个脚本的所有者） 但是，如果您希望能够在以下情况下关闭活动选项卡（切换和窗格）： 单击活动选项卡切换 单击选项卡切换或窗格之外的任何其他位置 按 ESC 键 ...那么这个脚本可能会帮助你： $(function() { var active = $('a[data-toggle="tab"]').parents('.active').length; var tabClicked = false; // Closes current active tab (toggle and pane): var close = function() { $('a[data-toggle="tab"]').parent().removeClass('active'); $('.tab-pane.active').removeClass('active'); active = null; } // Closing active tab when clicking on toggle: $('[data-toggle=tab]').click(function(){ if ($(this).parent().hasClass('active')){ $($(this).attr("href")).toggleClass('active'); active = null; } else { tabClicked = true; active = this; } }); // Closing active tab when clicking outside tab context (toggle and pane): $(document).on('click.bs.tab.data-api', function(event) { if(active && !tabClicked && !$(event.target).closest('.tab-pane.active').length) { close(); } tabClicked = false; }); // Closing active tab on ESC key release: $(document).keyup(function(e){ if(active && e.keyCode === 27) { // ESC close(); } }); }); 你可以用这个 JSFiddle 尝试一下： http://jsfiddle.net/almeidap/EAuUY/（使用 Bootstrap 3） 即使使用完全限定的网址，这实际上也会关闭选项卡。 $('[data-toggle=tab]').click(function(){ if ($(this).parent().hasClass('active')){ var url = $(this).attr('href'); var tid = url.split('#')[1]; console.log(tid); $('#'+tid).toggleClass('active'); document.location.hash = ''; } }); /// also can work with pills by switching to $('[data-toggle=pill]') 使用 jQuery 关闭 Bootstrap 5 打开的活动选项卡的方法： jQuery(document).ready(function(){ var activeTabId = false; jQuery(".nav-link[data-bs-toggle='tab']").click(function(){ var clickedTab = jQuery(this); var clickedTabId = clickedTab.attr("id"); if(activeTabId != clickedTabId){ //On new tab click activeTabId = clickedTabId; }else{ //On clicking of open tab -> Close tab clickedTab.removeClass("active").attr("aria-selected", false).attr("tabindex", ""); jQuery(clickedTab.attr("data-bs-target")).removeClass("active show"); activeTabId = false; } }); });//就绪结束

在页面刷新/导航时保留 Twitter Bootstrap 折叠状态

我正在使用 Bootstrap“折叠”插件为一长串链接制作一个手风琴。 Accordion-body 标签包含“collapse”，因此页面加载时所有组都会折叠。 当你打开...

根据屏幕宽度调整导航栏最小高度

我正在使用 bootstrap 并为导航栏设置了 150px 的最小高度。这可行，但当屏幕宽度低于 768px 时，我想将最小高度重新调整为 30px。 我正在使用...

Less 不使用 Twitter Bootstrap 编译文件

我在使用 less 文件和 Twitter Bootstrap 时遇到奇怪的问题： 我已经进行了深入的调查，但我仍然面临着问题。 我已经下载了 less 和