twitter-bootstrap 相关问题

使用引导响应网格系统时如何为图像提供动态宽度和高度

我正在使用 bootstrap 的网格系统，这是我的网站。问题是，在初始加载时，项目卡看起来非常糟糕，如下所示： 这是加载后的样子： 你可以...

引导日期选择器在第一次单击时无法工作[显示]

我的表单中有 Bootstrap datepicker，起初它工作正常，但现在，在我使用 jquery .load 函数加载包含 datepicker 元素的表单后，它无法工作/显示自己

在 Bootstrap v5.0.0-alpha1 中我可以使用什么媒体（BS 3/4）？

我想在 Bootstrap v5.0.0-alpha1 中使用媒体对象，但是如何呢？ 在 Bootstrap 3 和 4 中，我这样使用它： 我想在 Bootstrap v5.0.0-alpha1 中使用媒体对象，但是如何使用？ 在 Bootstrap 3 和 4 中，我这样使用它： <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css"> <div class="container mt-3"> <h2>Media Object</h2> <p>Create a media object with the .media and .media-body classes:</p> <div class="media border p-3"> <img src="https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375_960_720.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;"> <div class="media-body"> <h4>John Doe <small>Posted on February 19, 2016</small></h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> 在 v5.0.0-alpha1 中，我可以将哪个类用于媒体对象？我无法在 Bootstrap 5 中找到任何名为“media”的类。 在 Bootstrap 5 中，.media 对象已被删除。相反，您可以使用实用程序类和 Flexbox 来创建类似的布局。 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css"/> <div class="container mt-3"> <h2>Media Object</h2> <p>Create a media object without .media and .media-body classes (BS5):</p> <div class="d-flex border p-3"> <img src="https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375_960_720.png" alt="John Doe" class="flex-shrink-0 me-3 mt-3 rounded-circle" style="width:60px;height:60px;"> <div> <h4>John Doe <small>Posted on February 19, 2016</small></h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> Bootstrap 5 的文档说明了如何使用卡片来实现旧的媒体对象布局。 https://getbootstrap.com/docs/5.0/components/card/#horizontal 例如： <div class="card mb-3 border-0"> <div class="row g-3"> <div class="col-md-4"> <svg class="bd-placeholder-img" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image</text></svg> </div> <div class="col-md-8"> <div class="card-body p-0"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> 对于那些只使用 Bootstrap 网格部分的人，您可以实现如下所示的媒体对象布局： <figure class="row"> <p class="col-auto"> <img src="https://placeimg.com/100/100/animals" alt="A cute animal"> </p> <figcaption class="col">Look at the cute animal</figcaption> </figure> col-auto 将列收缩包裹到内容的宽度（在上面的示例中为图像），而 col 只是占用（或分配，如果有多个）剩余空间。 请参阅文档，了解更多信息。

如何在 Bootstrap Accordion 的标题上添加按钮，这样单击按钮就不会折叠或展开它

这里我在Accordion的标题上添加了2个按钮，但是当我单击按钮时，整个Accordion会折叠或展开。有没有一种方法可以向其添加按钮，以便单击它们...

如何将矩形放置到选定的div角

报表设计器使用div来创建字段、水平线和垂直线。 Jquery UI selectable 用于使它们可选择 网页： ... Report desiger 使用 div 创建字段、水平线和垂直线。 Jquery UI selectable 用于使它们可选择 HTML： <div class='designer-panel-body' style='height:100px'> <div class='designer-label' style='top:10px'> Field1 </div> <div class='designer-label' style='top:60px; left:20px'> Field2 </div> <div class='designer-label' style='top:10px; left:120px; height:60px'> </div> </div> CSS： .designer-label { position: absolute; border: solid 1px; } .ui-selected { background-color: blue; color: white; } javascript: $(".designer-panel-body").selectable( ); 如果选择了 div，如何在边框中添加小矩形，例如 如何更改 ui-selected 样式以便将矩形添加到角上？背景和颜色变化在线条中不可见，因此需要其他东西将它们标记为选中。 使用 Jquery、Jquery UI 和 Bootstrap 5。 CSS/Javascript 中的答案：在角上用小矩形标记单击的形状 为此使用了大量 javacript。可以用 CSS 完成吗？ var element = document.getElementById("element"); var burchaklar = document.querySelectorAll(".burchak"); var x, y, width, height; burchaklar.forEach(function (burchak) { burchak.addEventListener("mousedown", function (e) { e.preventDefault(); x = e.clientX; y = e.clientY; width = parseInt( document.defaultView.getComputedStyle(element).width, 10 ); height = parseInt( document.defaultView.getComputedStyle(element).height, 10 ); document.addEventListener("mousemove", surish); document.addEventListener("mouseup", function () { document.removeEventListener("mousemove", surish); }); }); }); function surish(e) { var dx = e.clientX - x; var dy = e.clientY - y; switch (event.target.id) { case "top-left": element.style.width = width - dx + "px"; element.style.height = height - dy + "px"; element.style.top = y + dy + "px"; element.style.left = x + dx + "px"; break; case "top-right": element.style.width = width + dx + "px"; element.style.height = height - dy + "px"; element.style.top = y + dy + "px"; break; case "bottom-left": element.style.width = width - dx + "px"; element.style.height = height + dy + "px"; element.style.left = x + dx + "px"; break; case "bottom-right": element.style.width = width + dx + "px"; element.style.height = height + dy + "px"; break; } }.element { position: relative; width: 200px; height: 150px; background-color: lightblue; border: 2px solid darkblue; } .burchak { position: absolute; width: 10px; height: 10px; background-color: red; cursor: nwse-resize; /* Chekkaga o'tish imkonini berish */ } #top-left { top: -5px; left: -5px; } #top-right { top: -5px; right: -5px; cursor: nesw-resize; /* Chekkaga o'tish imkonini berish */ } #bottom-left { bottom: -5px; left: -5px; cursor: nesw-resize; /* Chekkaga o'tish imkonini berish */ } #bottom-right { bottom: -5px; right: -5px; cursor: nwse-resize; /* Chekkaga o'tish imkonini berish */ }<div class="element" id="element"> <div class="burchak" id="top-left"></div> <div class="burchak" id="top-right"></div> <div class="burchak" id="bottom-left"></div> <div class="burchak" id="bottom-right"></div> <!-- Elementning ichki ma'lumotlari --> </div>

如何通过 Bootstrap 在导航栏上使用下拉菜单？

它是ASP.NET核心应用程序 我正在使用通过库管理器安装的 Bootstrap 5 - 根据文档引用了必要的引导文件 它是 ASP.NET 核心应用程序 我使用的是通过库管理器安装的 Bootstrap 5 -根据文档引用了必要的引导文件 <environment include="Development"> <link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" /> <script src="~/lib/jquery/jquery.js"></script> <script src="~/lib/jquery-validate/jquery.validate.js"></script> <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js</script> <script src="~/lib/twitter-bootstrap/js/bootstrap.bundle.js"></script> <script src="~/lib/twitter-bootstrap/js/bootstrap.js"></script> </environment> 导航栏位于 _Layout.cshtml 文件中，其中有一个导航项列表，我希望其中一个是下拉菜单 <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Manage </a> <ul class="dropdown-menu"> <li> <a class="dropdown-item" asp-controller="Administration" asp-action="ListUsers">Users</a> </li> <li> <a class="dropdown-item" asp-controller="Administration" asp-action="ListRoles">Roles</a> </li> </ul> </li> -导航链接显示在浏览器上，但不可点击，并且不显示下拉项。任何帮助将不胜感激，谢谢。 您的 html 代码工作正常，请确保添加正确版本的引导程序（打开 wwwroot\lib\bootstrap\dist\css\bootstrap.css 和 wwwroot\lib\bootstrap\dist\js\bootstrap.js 文件时检查文件的顶行）。 或者你可以使用cdnjs参考，整个html代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewData["Title"] - TestMVC</title> @* <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> *@ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css" integrity="sha512-6KY5s6UI5J7SVYuZB4S/CZMyPylqyyNZco376NM2Z8Sb8OxEdp02e1jkKk/wZxIEmjQ6DRCEBhni+gpr9c4tvA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="~/css/site.css" /> </head> <body> <header> <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> <div class="container"> <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">TestMVC</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between"> <ul class="navbar-nav flex-grow-1"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Manage </a> <ul class="dropdown-menu"> <li> <a class="dropdown-item" asp-controller="Administration" asp-action="ListUsers">Users</a> </li> <li> <a class="dropdown-item" asp-controller="Administration" asp-action="ListRoles">Roles</a> </li> </ul> </li> </ul> </div> </div> </nav> </header> <div class="container"> <main role="main" class="pb-3"> @RenderBody() </main> </div> <footer class="border-top footer text-muted"> <div class="container"> &copy; 2023 - TestMVC - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> </div> </footer> <script src="~/lib/jquery/dist/jquery.min.js"></script> @* <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> *@ <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.min.js" integrity="sha512-ewfXo9Gq53e1q1+WDTjaHAGZ8UvCWq0eXONhwDuIoaH8xz2r96uoAYaQCm1oQhnBfRXrvJztNXFsTloJfgbL5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="~/js/site.js" asp-append-version="true"></script> @await RenderSectionAsync("Scripts", required: false) </body> </html> 结果显示：

导航栏上的下拉菜单不起作用。修复吗？

我在尝试让下拉菜单正常工作时遇到了一些麻烦。我能够完美地设置导航栏，但是一旦我尝试执行某些操作或使用下拉菜单，它就根本不起作用。 任何人...

如何在视频开始前的 <iframe></iframe> 标签中添加海报图像？

需要在网站中创建一个直播页面，当没有视频流时，视频窗口中可能会出现海报，直到视频显示为止。 将不胜感激所有的帮助我...

如何使用 Turbolinks 扩展 Bootstrap 导航栏

在我的 Rails 4 应用程序中，我使用 Bootstrap 的导航栏。当导航栏折叠时，单击它时它并不总是展开/切换。菜单图标显示，但是当您单击它时，它不起作用

如何在点击 2 秒后使用 JavaScript 动态更改按钮上的图标？

我的脚本的主要目的是宣布文本的复制已经成功完成。 当我单击按钮时，第一个图标更改正常，吐司显示也是如此，并且...

我无法在Ubuntu中安装pm install react-bootstrap bootstrap。我在终端中遇到很多错误

我是 npm 世界的新手，对于这个问题我深表歉意。我想将 Bootstrap 与 React 一起使用（React-Bootstrap）。我在 Ubuntu 中安装 npm install react-bootstrap bootstrap 时遇到问题....

导入'bootstrap/dist/css/bootstrap.min.css';改变我所有元素的大小？

我需要此导入来设置组件： 从“反应”导入反应 从 'mdb-react-ui-kit' 导入 { MDBInput、MDBCheckbox、MDBBtn、MDBTextArea }； // 注释 MDBTextArea hinzu 导入'bootstrap/d...

在LANSA中使用Bootstrap

我正在开展一个项目，我们使用 LANSA、AXES 和 RAMP 工具将 AS400 应用程序现代化到 Web 中，该应用程序通常会对 AS400 屏幕进行屏幕抓取并将其转换

无法通过 Javascript 和 AJAX 显示/隐藏跨度微调器？

我正在尝试在联系表单的提交按钮上显示和隐藏微调器。提交表单时，旋转器应显示在按钮上。一旦提交表格，旋转...

如何在引导程序中设置下拉项的宽度？

我必须在导航栏的右侧添加一个小下拉菜单。 我试图通过添加一个设置宽度的新 CSS 类来设置元素的宽度，但我尝试的任何方法都不起作用。 我必须在导航栏的右侧添加一个小下拉菜单。 我试图通过添加一个设置宽度的新 CSS 类来设置元素的宽度，但我尝试的任何方法都不起作用。 <li class="nav-item dropdown"> <a href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle"> some text </a> <div aria-labelledby="navbarDropdownLangMenu" class="dropdown-menu"> <a class="dropdown-item">AA</a> <a class="dropdown-item">BB</a> </div> </li> 除了元素的宽度之外，一切都工作正常。每个链接只有两个字符，但宽度很大，超出了屏幕的宽度： 引导程序的下拉菜单中有一个最小宽度。 您可以像这样重置它： .dropdown-menu { min-width:inherit; } 试试这个： .navbar .dropdown-menu.show { min-width: inherit; display: inline-block; } <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item">AA</a> <a class="dropdown-item">BB</a> </div> </li> </ul> </div> </nav> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </div>

打开时模态内的模态，仅先关闭 - Bootstrap

我在模态中创建了引导模态，首先打开主模态，然后在模态中打开子模态，但是当我关闭它时，应该首先关闭子模态，然后关闭父模态...

Bootstrap 3.0 弹出窗口和工具提示

我是 Bootstrap 新手，我无法让弹出窗口和工具提示功能正常工作。我对下拉菜单和模型没有任何问题，但我似乎缺少弹出框和

在Astro中导入Bootstrap

我目前正在开发 Astro (astro.build)，并希望将其与最新的 Bootstrap 版本一起使用。 有谁了解 Astro 并且可以向我解释如何正确集成 Bootstr...

data-dismiss="modal" 关闭 MVC 部分视图中同一页面上所有打开的模态对话框

我正在研究两个不同的部分视图，它们是一起工作的。 当在一个页面上使用多个模态时，同时打开彼此之上，使用 data-dismiss="...

引导颜色选择器在更改时不更新值

我正在使用引导程序制作一个表单，输入之一是颜色选择器元素。 当用户选择颜色时，值属性保持不变。 看来价值属性仍然是原来的样子