twitter-bootstrap 相关问题

Bootstrap是一个前端框架,旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题,请使用“twitter-bootstrap-2”,“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。


自定义 field_with_errors

有没有办法告诉 Rails 不要在标签和实际字段周围创建 div.field_with_errors,而是在它们周围创建 div.error? 例如。从我的观点中摘取表格(写在......

回答 16 投票 0

为什么 Bootstrap 5 手风琴不起作用

我正在尝试制作一个 Bootstrap 5 手风琴,这样我就可以组织我的内容,但是在我的网站上,手风琴项目总是打开的,当点击手风琴项目时,手风琴项目会做出一些移动然后......

回答 0 投票 0

如何禁用 Bootstrap 工具提示

如何禁用引导工具提示? 我启用它使用: 函数 activateTooltip() { const toolTips = document.querySelectorAll('.tooltip'); toolTips.forEach(t => { 新的 bootstrap.Toolti ...

回答 1 投票 0

如何在 bootstrap 移动版中隐藏网格中的一列

我觉得我想在 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>

回答 5 投票 0

无法在 Blazor WebAssembly App 的侧边栏上切换 Adminlte 的导航栏

我正在使用 Adminlte 模板使用 Blazor 构建仪表板应用程序。我创建了一个起始页(来自 https://github.com/ColorlibHQ/AdminLTE/blob/master/starter.html)但是侧边栏上的导航栏是...

回答 0 投票 0

popover 和 yii2

我无法在 yii2 中创建弹出窗口。 按钮什么都不做 JS $(函数(){ $('[data-toggle="popover"]').popover() }) 连接JS $this->registerJsFile('/assets/js/popover.js', ['

回答 1 投票 0

Bootstrap 5 不适用于 e-junkie 购物车

我正在使用 Bootstrap 4 和 E-junkie 购物车。然后我想更新为使用 Bootstrap 5,我遇到了一个问题,即在较小的屏幕上,导航栏显示了折叠按钮,但它没有用......

回答 1 投票 0

悬停时如何更改 svg 的颜色?

我正在制作这个登陆页面,我的 figma 说,当按钮图标悬停时,我需要将背景颜色更改为白色,将 svg 文件更改为灰色。更改背景颜色很容易

回答 1 投票 0

为什么 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值似乎也不起作用。

回答 0 投票 0

justify-content-between 不适用于 div 容器中的两个项目

尝试根据此处的 Boostrap 文档使用 justify-content-between 将两个元素放在 div 容器的两端。但是,它不会将项目放在行的两端。我怎么能把...

回答 1 投票 0

Bootstrap 下拉子菜单丢失

Bootstrap 3 仍在 RC,但我只是想实现它。我不知道如何放置子菜单类。即使 css 中没有类,甚至新文档也没有说明任何内容......

回答 11 投票 0

Bootstrap 工具提示在悬停时保持打开状态

我在我的网页上设置了引导工具提示。当您滚动图像时,会显示工具提示,在工具提示中我有一个链接,当我滚动实际的工具提示以单击链接时...它很...

回答 7 投票 0

如何根据屏幕尺寸更改背景图像,可能使用 Bootstrap

我有一个 background-image:url 在我的 CSS 中。问题是当我过渡到屏幕变为纵向的移动设备时。我有一个不同的肖像导向背景...

回答 4 投票 0

将复选框与输入对齐

我用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>

回答 1 投票 0

指定占用空间

我用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/

回答 0 投票 0

jQuery UI 对话框“X”图标从模态和常见解决方案的右上角丢失

我遇到了一个问题,我的 jQueryUI 对话框没有右上角的“x”图标。这个 stackO 帖子 jQuery UI 对话框 - 缺少关闭图标 建议 jQueryUi.js

回答 0 投票 0

仅在单击按钮时重定向到表单并选择选项 - 否则默认为导航选项卡的标准显示

我在一个导航选项卡上有一个表格,我正在从另一个导航选项卡链接到它。我使用下面的代码从几个页面链接到我的所有导航选项卡。 const hash=window.location.hash; 常量 bsTab ...

回答 1 投票 0

Bootstrap dismissible alert 不工作

我已经解决这个错误一个小时了,似乎找不到任何解决方案!我正在使用引导程序并且我有一个可关闭的警报但是当我单击 x 以关闭时没有任何反应。 ...

回答 11 投票 0

未来 Wordpress 帖子缩略图输出的特定 Bootstrap 5 网格系统逻辑

我正在 Bootstrap 5 上制作网站。并且需要为产品缩略图制作这样的网格系统(下图)。 我的想法(逻辑)是像这样制作这个网格(下图)。该网格将响应...

回答 0 投票 0

导航栏固定顶部 Bootstrap 下方的空间

导航栏和内容div之间有一个神秘的空间(大约25px)。我使用的是 Chrome 和 1600x900 屏幕分辨率。我已经查看了具有完全相同问题的其他问题,...

回答 2 投票 0
热门问答
最新问题