Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。
有没有办法告诉 Rails 不要在标签和实际字段周围创建 div.field_with_errors，而是在它们周围创建 div.error？ 例如。从我的观点中摘取表格（写在......
我正在尝试制作一个 Bootstrap 5 手风琴，这样我就可以组织我的内容，但是在我的网站上，手风琴项目总是打开的，当点击手风琴项目时，手风琴项目会做出一些移动然后......
如何禁用引导工具提示？ 我启用它使用： 函数 activateTooltip() { const toolTips = document.querySelectorAll('.tooltip'); toolTips.forEach(t => { 新的 bootstrap.Toolti ...
我觉得我想在 bootstrap 移动版本中隐藏网格中的一列有点棘手。让我们举个例子 我想在 bootstrap 移动版中隐藏网格中的一列有点棘手。让我们举个例子 <div class="row"> <div class="col-xs-9"> <p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p> </div> <div class="col-xs-3 center-image hidden-xs"><img src="myimage.png"/></div> </div> 在编码之上，我在移动设备查看时隐藏了图像部分。我想要的是我不想要图像部分的间距，即使它被隐藏为增加左侧部分以到达右侧。 自 Bootstrap V4 以来，hidden-X 类已被删除。为了根据列宽隐藏列，请使用d-none d-X-block。基本上，您只需关闭要隐藏的尺寸的显示，然后设置更大尺寸的显示即可。 对所有人隐藏 .d-none 隐藏在 xs .d-none .d-sm-block 隐藏在 sm .d-sm-none .d-md-block 隐藏在 md .d-md-none .d-lg-block 隐藏在 lg .d-lg-none .d-xl-block 隐藏在 xl .d-xl-none 取自这个答案. 因为您隐藏了“xs”中的第二列，您可以通过将类“col-xs-12”定义为 column1 来使用第一列的全宽。 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-xs-12 col-sm-9"> <p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p> </div> <div class="col-sm-3 center-image hidden-xs"><img src="myimage.png"/></div> </div> 如果您使用的是 bootstrap 4，和/或想要隐藏除超小视图以外的任何列，方法如下： Bootstrap 3： <div class="row"> <div class="col-lg-12 col-xl-9"> </div> <div class="col-xl-3 hidden-lg hidden-md hidden-sm hidden-xs"> </div> </div> 换句话说，您必须定义要隐藏列的每个单独的预定义视口大小。 Bootstrap 4：（少一点冗余） <div class="row"> <div class="col-lg-12 col-xl-9"> </div> <div class="col-xl-3 hidden-lg-down"> </div> </div> 另外，如果你想在屏幕太大时隐藏一列： <div class="row"> <div class="col-md-12 col-sm-9"> </div> <div class="col-sm-3 hidden-md-up"> </div> </div> 还请注意，col-xs-[n] 在 bootstrap 4 中已被 col-[n] 替换 你必须使用的是媒体查询。 举个例子： @media (min-width: 1000px) { #newDiv { background-color: blue; } .col-xs-3 { display: block; } } @media (max-width: 999px) { #newDiv { background-color: red; width: 100%; padding-right: 50px; margin-right: 0px; } .col-xs-3 { display: none; } } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div id="newDiv" class="col-xs-9"><p>Hello World!</p></div> <div class="col-xs-3"><p>Hello to you to</p></div> 全屏查看屏幕响应 在 Bootstrap 5 中，我们使用显示实用程序 (https://getbootstrap.com/docs/5.3/utilities/display/)。 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <div class="row"> <div class="col-xs-12 col-sm-9"> <p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p> </div> <div class="col-sm-3 center-image d-none d-sm-block"> <img src="https://placehold.co/100x100/"> </div> </div>
无法在 Blazor WebAssembly App 的侧边栏上切换 Adminlte 的导航栏
我正在使用 Adminlte 模板使用 Blazor 构建仪表板应用程序。我创建了一个起始页（来自 https://github.com/ColorlibHQ/AdminLTE/blob/master/starter.html）但是侧边栏上的导航栏是...
我无法在 yii2 中创建弹出窗口。 按钮什么都不做 JS $(函数(){ $('[data-toggle="popover"]').popover() }) 连接JS $this->registerJsFile('/assets/js/popover.js', ['
我正在使用 Bootstrap 4 和 E-junkie 购物车。然后我想更新为使用 Bootstrap 5，我遇到了一个问题，即在较小的屏幕上，导航栏显示了折叠按钮，但它没有用......
我正在制作这个登陆页面，我的 figma 说，当按钮图标悬停时，我需要将背景颜色更改为白色，将 svg 文件更改为灰色。更改背景颜色很容易
为什么 Bootstrap .ratio 会导致 img 出现在 offcanvas 菜单上？
如何阻止比例图像出现在画布菜单上方？ 使用 Bootstrap 5，强制图像为 16x9... 如何阻止比例图像出现在画布菜单上方？ 使用 Bootstrap 5，强制图像为 16x9... <div class="ratio ratio-16x9 my-3"> <img width="768" height="432" src="my-image.jpg" class="object-fit-cover img-fluid w-100 wp-post-image" alt="" decoding="async" itemprop="image" sizes="(max-width: 768px) 100vw, 768px"> </div> ...使图像出现over我的offcanvas菜单... <div class="offcanvas-md offcanvas-end sticky-md-top show" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel" aria-modal="true" role="dialog"> <div class="offcanvas-header border-bottom"> <h5 class="offcanvas-title " id="offcanvasResponsiveLabel"> <span id="site-title-offcanvas" itemprop="publisher" itemscope="" itemtype="https://schema.org/Organization"> <a href="http://example.com/" title="My Site" rel="home" itemprop="url" class="navbar-brand"><span itemprop="name">My Site</span></a> </span> </h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button> </div> <div class="offcanvas-body d-block vh-100 overflow-y-auto"> <nav role="navigation" itemscope="" itemtype="https://schema.org/SiteNavigationElement"> <ul class="list-unstyled m-3"> <li class="mb-2"> <a itemprop="url" data-bs-toggle="collapse" data-bs-target="#category-collapse" href="#" class="nav-link sidebar-parent d-flex collapsed" aria-expanded="true"> <div class="flex-fill"> <i class="menu-icon fa-fw fa-solid fa-desktop"></i> <span class="text" itemprop="name">Categories</span> </div> </a> <!-- And more menu content --> </nav> </div> </div> 在我应用比率之前并没有发生，当我删除它们时，排序很好。 .offcanvas-md 带有 z-index: var(--bs-offcanvas-zindex); 将此更改为任何数字（例如 1050）并将较小的数字（例如 z-index: 4）应用于 .ratio 不会导致正确的排序。 改变图像的position值似乎也不起作用。
justify-content-between 不适用于 div 容器中的两个项目
尝试根据此处的 Boostrap 文档使用 justify-content-between 将两个元素放在 div 容器的两端。但是，它不会将项目放在行的两端。我怎么能把...
Bootstrap 3 仍在 RC，但我只是想实现它。我不知道如何放置子菜单类。即使 css 中没有类，甚至新文档也没有说明任何内容......
我在我的网页上设置了引导工具提示。当您滚动图像时，会显示工具提示，在工具提示中我有一个链接，当我滚动实际的工具提示以单击链接时...它很...
我有一个 background-image:url 在我的 CSS 中。问题是当我过渡到屏幕变为纵向的移动设备时。我有一个不同的肖像导向背景...
我用bootstrap 5 我搜索将复选框与输入的其余部分对齐，实际上它就像与标签对齐 <... 我使用 bootstrap 5 我搜索将复选框与输入上的其余部分对齐，实际上它就像与标签对齐 <form class="row g-3"> <div class="col-md-6"> <label for="inputEmail4" class="form-label">Email</label> <input type="email" class="form-control" id="inputEmail4"> </div> <div class="col-md-6"> <label for="inputPassword4" class="form-label">Password</label> <input type="password" class="form-control" id="inputPassword4"> </div> <div class="col-6"> <label for="inputAddress" class="form-label">Address</label> <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> </div> <div class="col-12"> <label for="inputAddress2" class="form-label">Address 2</label> <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> </div> <div class="col-md-6"> <label for="inputCity" class="form-label">City</label> <input type="text" class="form-control" id="inputCity"> </div> <div class="col-md-4"> <label for="inputState" class="form-label">State</label> <select id="inputState" class="form-select"> <option selected>Choose...</option> <option>...</option> </select> </div> <div class="col-2"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="gridCheck"> <label class="form-check-label" for="gridCheck"> Check me out </label> </div> </div> <div class="col-12"> <button type="submit" class="btn btn-primary">Sign in</button> </div> </form> https://jsfiddle.net/td1479L5/ 不完全确定我是否正确理解了这个问题，但也许这就是你想要的？地址输入字段现在与用户/密码输入字段同时从内联更改为块。 https://jsfiddle.net/officernickwilde/fak53y2r/ <style> .expanding-form-entry { min-width: 385px; flex-grow:1; }</style> <form class="row g-3"> <div class="col-md-6"> <label for="inputEmail4" class="form-label">Email</label> <input type="email" class="form-control" id="inputEmail4"> </div> <div class="col-md-6"> <label for="inputPassword4" class="form-label">Password</label> <input type="password" class="form-control" id="inputPassword4"> </div> <div class="col-6 expanding-form-entry"> <label for="inputAddress" class="form-label">Address</label> <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> </div> <div class="col-6 expanding-form-entry"> <label for="inputAddress2" class="form-label">Address 2</label> <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> </div> <div class="col-md-6"> <label for="inputCity" class="form-label">City</label> <input type="text" class="form-control" id="inputCity"> </div> <div class="col-md-4"> <label for="inputState" class="form-label">State</label> <select id="inputState" class="form-select"> <option selected>Choose...</option> <option>...</option> </select> </div> <div class="col-md-2"> <label for="inputZip" class="form-label">Zip</label> <input type="text" class="form-control" id="inputZip"> </div> <div class="col-12"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="gridCheck"> <label class="form-check-label" for="gridCheck"> Check me out </label> </div> </div> <div class="col-12"> <button type="submit" class="btn btn-primary">Sign in</button> </div> </form>
我用bootstrap 5 实际上我的地址组件占用 6 个空间，地址 2 占用 12 个空间，所以地址 2 在另一行。 有没有办法指定占用 6 个空间.. 但接下来的 6 个空间不可用？ 我使用 bootstrap 5 实际上我的地址组件占用 6 个空间，地址 2 占用 12 个空间，所以地址 2 在另一行。 有没有办法指定占用 6 个空间..但是接下来的 6 个空间不可用？ <form class="row g-3"> <div class="col-md-6"> <label for="inputEmail4" class="form-label">Email</label> <input type="email" class="form-control" id="inputEmail4"> </div> <div class="col-md-6"> <label for="inputPassword4" class="form-label">Password</label> <input type="password" class="form-control" id="inputPassword4"> </div> <div class="col-6"> <label for="inputAddress" class="form-label">Address</label> <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> </div> <div class="col-12"> <label for="inputAddress2" class="form-label">Address 2</label> <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> </div> <div class="col-md-6"> <label for="inputCity" class="form-label">City</label> <input type="text" class="form-control" id="inputCity"> </div> <div class="col-md-4"> <label for="inputState" class="form-label">State</label> <select id="inputState" class="form-select"> <option selected>Choose...</option> <option>...</option> </select> </div> <div class="col-md-2"> <label for="inputZip" class="form-label">Zip</label> <input type="text" class="form-control" id="inputZip"> </div> <div class="col-12"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="gridCheck"> <label class="form-check-label" for="gridCheck"> Check me out </label> </div> </div> <div class="col-12"> <button type="submit" class="btn btn-primary">Sign in</button> </div> </form> https://jsfiddle.net/1qdcL5zm/
jQuery UI 对话框“X”图标从模态和常见解决方案的右上角丢失
我遇到了一个问题，我的 jQueryUI 对话框没有右上角的“x”图标。这个 stackO 帖子 jQuery UI 对话框 - 缺少关闭图标 建议 jQueryUi.js
仅在单击按钮时重定向到表单并选择选项 - 否则默认为导航选项卡的标准显示
我在一个导航选项卡上有一个表格，我正在从另一个导航选项卡链接到它。我使用下面的代码从几个页面链接到我的所有导航选项卡。 const hash=window.location.hash; 常量 bsTab ...
Bootstrap dismissible alert 不工作
我已经解决这个错误一个小时了，似乎找不到任何解决方案！我正在使用引导程序并且我有一个可关闭的警报但是当我单击 x 以关闭时没有任何反应。 ...
未来 Wordpress 帖子缩略图输出的特定 Bootstrap 5 网格系统逻辑
我正在 Bootstrap 5 上制作网站。并且需要为产品缩略图制作这样的网格系统（下图）。 我的想法（逻辑）是像这样制作这个网格（下图）。该网格将响应...
导航栏和内容div之间有一个神秘的空间（大约25px）。我使用的是 Chrome 和 1600x900 屏幕分辨率。我已经查看了具有完全相同问题的其他问题，...