twitter-bootstrap 相关问题

尝试让 Bootstrap 4 导航栏折叠在 Vue 中工作

我正在尝试使引导导航栏折叠在移动设备上工作，因为它根本不起作用。请不要在代码中提供其他依赖项，例如 vue-bootstrap 或实现 jquery...

使一列中的列表组滚动，页面与较长的另一列对齐

给定引导程序中的两列 - 即 col-4 和 col-8，其中较小的列包含列表组（导航），第二列包含内容，如何才能使列表组保持不变...

Laravel：更改异常处理程序类的位置

我们正在重组应用程序的文件夹布局，使其更符合 DDD 域驱动程序设计理念。 例如 /应用程序 /用户 /工作 /验证 /http /安慰 /... /

mPDF 和引导列在下一行

我目前正在尝试使用 mPDF 打印简单的 HTML 页面。 该页面是使用 bootstrap 完成的，非常基础。 按照文档，我可以打印 pdf，但在 HTML 中，一切都......

我该如何解决这个问题，我正在使用 NgbDatepicker

需要添加更多宽度以选择框。我正在使用 NgbDatepicker。尝试了 css 样式但不起作用 需要增加更多宽度

引导模式 - 屏幕变黑

我有两个模态框，它们在单击按钮时弹出。一个工作正常，但对于第二个，屏幕只是变黑，没有任何反应： 一、工作模式： 我有两个模式，它们在单击按钮时弹出。一个工作正常，但是对于第二个，屏幕只是变黑，没有任何反应： 一、工作模式： <div id="deleteConfirmation" class="hidden, modal fade"> <div class="modal-dialog"> <div class="modal-content"> <h5>Are you sure you want to delete this contact?</h5> <button id="deleteOk"> Yes </button> <button id="deleteNo"> No </button> </div> </div> </div> 并弹出此命令： $('#deleteConfirmation').modal('show'); 第二个，几乎相同，但不起作用： <div id="addContact" class="hidden, modal fade"> <div class="modal-header"> <h5>Add New Contact</h5> </div> <div class="modal-dialog"> <div class="modal-content"> <label>First Name </label><input /> <br /> <label>Last Name </label><input /> <br /> <label>Address </label><input /> <br /> <label>Phone Number </label><input /> <br /> <button id="addConfirm"> Confirm </button> </div> </div> </div> 命令： $('#addContact').modal('show'); 它基本上是两个相同的模式，但是对于第二个模式，屏幕只是变黑，而第一个模式可以正常工作。我认为这是我正在使用的课程之一。这里似乎出了什么问题？ 您这里有错字： <div id="deleteConfirmation" class="hidden, modal fade"> <div id="addContact" class="hidden, modal fade"> 删除逗号： <div id="deleteConfirmation" class="hidden modal fade"> <div id="addContact" class="hidden modal fade"> 因此脚本无法确定hidden类是否正确应用，最终你不会看到除了黑死屏之外的任何东西！ :O 我在 bootply 创建了一些模态并调整了你的代码，看看这是否有任何帮助。 bootply 示例 我认为这里真正要做的是通过更改以下内容来删除 div 标签中的隐藏类： <div id="deleteConfirmation" class="hidden modal fade"> <div id="addContact" class="hidden modal fade"> 到此 <div id="deleteConfirmation" class="modal fade"> <div id="addContact" class="modal fade"> 如果您浏览引导文档，您将看不到添加隐藏类的位置：http://getbootstrap.com/javascript/#modals 您需要执行此操作来修复。 $("#deleteConfirmation").prependTo("body"); 这个对我有用。 $("#deleteConfirmation").prependTo("body"); 可能是任何 div 内的引导模型，尝试将主体的末端放置:)

如何在bootstrap中的图像上添加文本

我是引导程序新手，正在制作一个简单的响应式网页设计。我已经为引导容器提供了图像，现在我想在图像上添加文本，这样我就可以在上面添加更多文本和图像

使用 HTML 表格和 CSS3 显示项目状态

我想跟踪我的一些项目的状态，如下图所示： 活动 1/2/3 将从数据源获取一些数据，并将包含开始日期和结束日期。 我使用的桌子是

Nuxt3：为什么这个文本输入元素不遵守 maxlength 属性？

我正在使用 Nuxt3，由于某种原因，以下 HTML 输入元素中指定的 maxlength="70" 属性不受尊重（我可以输入超过 70 个字符）。有谁知道为什么？ <

为什么按下提交按钮后会发生引导表单验证？

我有一个用bootstrap构建的表单，我发现表单验证不会在提交按钮的onclick事件之前运行，这有点无用。 请参阅此小提琴的示例 -...

我的引导程序轮播未显示背景图像

正如标题所说。我已经审查了大多数（如果不是全部）解决方案，这似乎是最接近的：Bootstrap carousel not work with background image 不幸的是我需要一些代码帮助......

使用引导程序修复了表头

我遇到了冲突，因为只有当我使用表响应类的 div 时，我的标头才被修复，但我需要它来使表溢出。 有人能帮我吗？ 与表格响应...

Rails：带有button_to的按钮组

我在 Rails 应用程序中使用 Bootstrap，我想创建一个按钮组，其中包含使用 <%=button_to%> 生成的按钮。 这就是我所拥有的： ... 我在 Rails 应用程序中使用 Bootstrap，我想创建一个按钮组，其中包含使用 <%=button_to%> 生成的按钮。 这就是我所拥有的： <div class="btn-group icons"> <%= button_to(raw("<i class='icon-undo'></i>"), project_steps_path(@project), :method=>:post, :class=> "btn undoIcon disabled", :title=>"undo" )%> <button class="btn reorderIcon" title="reorder steps"><%=image_tag("icons/reorder_icon.png")%></button> <button class="btn expandIcon" title="expand"><i class="icon-fullscreen"></i></button> </div> 我期望 <%= button_to%> 在 html 中生成类似 <button class=...> 的内容，但我得到了以下内容： <div class="btn-group icons"> <form action="/projects/18/steps" class="button_to" method="post"><div><input class="btn undoIcon disabled" title="undo" type="submit" value="&lt;i class='icon-undo'&gt;&lt;/i&gt;"><input name="authenticity_token" type="hidden" value="waRzPnaIUfWBt+sAAQR5STOnilLXhirOx/GaE1i1kFI="></div></form> <button class="btn reorderIcon" title="reorder steps"><img alt="Reorder_icon" src="/assets/icons/reorder_icon.png"></button> <button class="btn expandIcon" title="expand"><i class="icon-fullscreen"></i></button> </div> 这会在我的页面上产生以下内容： 如何正确使用 <%=button_to raw()%> 创建按钮？ 我通过将 button_to 替换为 link_to 解决了这个问题 你需要一点CSS。这就是我所做的： <div class='btn-group form-btn-group'> <%= button_to 'btn1', '#', class: 'btn', form_class: 'btn btn-default' %> <%= button_to 'btn2', '#', class: 'btn', form_class: 'btn btn-default' %> </div> 还有 CSS： <form>元素需要.btn类，但应为实际的<button>留出空间 取消<button>元素的样式 .form-btn-group > .btn { padding: 0; } .form-btn-group > .btn > .btn { border: none; background: none; } 在Rails 7和bootstrap 5.3上遇到问题，我尝试了@jibai31的解决方案。我尝试尽可能简洁： .btn-group.btn-form-group{ role: 'group', 'aria-label': 'Actions on my resource' } = link_to anc, class: 'btn btn-primary' do = bi_icon('eyeglasses') = link_to edit_anc_path(anc), class: 'btn btn-primary' do = bi_icon('pencil-square') = button_to anc, action: :delete, method: :delete, data: { turbo_method: :delete, turbo_confirm: t('confirm', scope: 'common') }, form_class: 'btn btn-primary', class: 'btn btn-primary' do = bi_icon('trash3') 请注意，使用 data: turbo_* 来替换 Rails-ujs data: confirm 并不开箱即用，因为您需要在最新的 Rails 版本中自行安装它。有关确认的更准确信息，请参阅此处。

使用 javascript 禁用引导选择选项

我尝试使用 JavaScript 禁用我的特定引导选择选项。 我知道如何禁用“正常选择选项”，但是当使用引导选择时它不起作用（它被禁用/变灰...

CSS 属性值中的 !default 是什么意思？

twitter 引导代码有很多 CSS 属性，末尾带有 !default。 例如。 p { 颜色：白色！默认； } !default 是做什么的？ 更新 我的不好是因为我不清楚。我正在使用...

在 DIV 上创建倾斜框阴影

如何在 div 元素上添加倾斜框阴影？ 我尝试在 div 后面添加一个绝对 div，但这似乎无法正常工作。 我尝试过的CSS是： .shadow-box-bg { 背景颜色...

为什么bootstrap-datepicker显示时会触发'show.bs.modal'？

我有一个模态，如下图所示， 当我选择包含日期选择器的输入字段时，会触发引导模式事件 .on('show.bs.modal') ，这是非常有问题的，因为我

为每列使用不同的引导容器

我想在引导程序中有两列，它们都使用不同容器的最大宽度。 在这种情况下绝对位置的问题是容器不知道......的高度是多少

如何设置 Bootstrap 4 toast 的宽度？

我有一个带有 Bootstrap 4 toast 的页面，我将 toast 的位置设置为位置：固定。整个吐司部分如下所示： 我有一个带有 Bootstrap 4 toast 的页面，我将 toast 的位置设置为 postion: fixed。整个吐司部分是这样的： <div class="container mt-5"> <button type="button" class="btn btn-primary" id="liveToastBtn">Toast it</button> <div id="toastContainer" style="position: fixed; top: 1.5vw; right: 1vw; bottom: 4.5vw; z-index: 9;"> <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img src="..." class="rounded mr-2" alt="..."> <strong class="mr-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> </div> </div> 您可以在 this JSFiddle 中找到完整的工作代码。 该作品按原样工作得很好，但现在我想将 toast 的宽度设置为视口的 50% 左右。在 <div id="toastContainer"...> 行中，我尝试设置 width 属性： <div id="toastContainer" style="position: fixed; top: 1.5vw; width: 50%; right: 1vw; bottom: 4.5vw; z-index: 9;"> 或者我尝试设置left： <div id="toastContainer" style="position: fixed; top: 1.5vw; left: 50%; right: 1vw; bottom: 4.5vw; z-index: 9;"> 但在这两种情况下，出现的 toast 的 width 都不会改变（仅其水平 position）。 如何设置 Bootstrap 4 toast 的宽度？ 我找到了办法。它也有帮助，它在网站上，我可以直接在上面尝试东西，让事情变得更容易。 我不知道你是否熟悉 bootstrap 但是有这样的东西可以让你通过将 class="col-x" （x 在 1-12 之间）的东西放入 a 中来“控制”东西的长度div 与 class="row"。 <div class="row"> <button type="button" class="btn btn-primary col-8" id="liveToastBtn">Toast it</button> </div> 正如你所看到的，这就是我所做的，只需在按钮的类中添加 col-8 即可，你可以更改它，但我发现 6 看起来不像 50% 8 更接近。 然后你需要一些CSS来使按钮居中: .row{ display:flex; justify-content:center; } 希望这就是您正在寻找的🥶🥶🥶🥶🥶🥶

导航栏在小屏幕下不起作用

我使用引导程序创建了一个简单的导航栏，但是当我单击它时，它不显示列表项，它在更大的屏幕上工作正常。 我已经尝试了很多替代方案，但它不起作用。 ...