twitter-bootstrap 相关问题

在 Bootstrap 选择器上使用 jQuery 取消选择选项

我正在使用 Bootstrap 来处理一些 UI 元素：SelectPicker，它允许用户选择多个选项并将其呈现在段落标签中的屏幕上。他们还应该能够删除...

引导验证错误导致表单对齐问题

在这个简单的示例中，当我在表单左侧的名字输入框中出现验证错误时，电子邮件表单元素会被推到页面下方。 当我在

在 Google Apps 脚本中使用 Bootstrap Modals

我正在尝试创建一个表单，允许用户检查我们数据库中的状态，并在提交时我想写入我们的数据库，然后返回一个引导CSS模式，其中包含查询另一个表的信息...

如何使用 bootstrap 或 js 折叠 div 并打开选项卡

我希望当我单击链接并平滑滚动到向下然后折叠 div 并使用 Javascript 打开选项卡时。 此代码已滚动 我希望当我单击链接并平滑滚动到下方时 collapse div 并使用 tab 打开 Javascript。 此代码已滚动 <a data-scroll href="#smoothScrool" onclick="callMyFunction('tab-1')"><h4 >Scroll, collapse and open tab automatic</h4></a> 到这里，通过句柄，我可以折叠并打开水龙头，但我不想用 Javascript 自动完成。我该怎么办？ <div class="panel-heading"><span id="smoothScroll">Scrolled Here!</span> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion2" href="#collapse-9" class="collapsed" aria-expanded="false"> <i class="fa fa-angle-down control-icon"></i> <i class="fa fa-universal-access"> Qeydiyyatsız müraciət</i> </a> </h4> </div> <div id="collapse-9" class="panel-collapse collapse" aria-expanded="false"> <div class="panel-body"> <div class="row"> <div class="col-md-12 page-content "> <div class="hr1 margin-top"></div> <div class="tabs-section"> <!-- Nav Tabs --> <ul class="nav nav-tabs center-block"> <li class="active"><a href="#tab-1" data-toggle="tab"><i class="fa fa-question"></i>TAB 1</a></li> <li><a href="#tab-2" data-toggle="tab"><i class="fa fa-envelope"></i>TAB 2</a></li> <li><a href="#tab-3" data-toggle="tab"><i class="fa fa-briefcase"></i>TAB 3</a></li> <li><a href="#tab-4" data-toggle="tab"><i class="fa fa-legal"></i>TAB 4</a></li> </ul> <!-- Tab panels --> <div class="tab-content"> <!-- Tab Content 1 --> <div class="tab-pane fade in active" id="tab-1"> <div class="row"> </div> </div> 滚动到 div（此工作） 自动折叠div（我该怎么办？） 自动打开标签页（我该怎么做？） 请建议最佳方法和代码示例。 请参阅相关的官方引导文档，可能会有所帮助，或者至少可以让您更好地了解如何找到解决方案：http://getbootstrap.com/javascript/#tabs 还有 Jquery UI：https://jqueryui.com/tabs/#mouseover 我希望这些链接有用

从引导下拉菜单触发模式

我有一个引导下拉菜单，其中的链接打开一个模式。一切似乎在桌面上运行良好，但模式无法在移动设备上打开。我在同一页面上有按钮，可以再次打开模态和这些

删除文件扩展名并同时用空格替换下划线

{% 扩展 'base.html' %} {% 块内容 %} {% 数据中的对象 %} {{ 对象.文件名|sp... {% 扩展 'base.html' %} {% 块内容 %} {% for object in data %} <!-- USE BOOTSTRAP --> <div class="card card-body mb-2"> <h1>{{ object.filename|split('.').slice(0, -4).join('.')|str.replaceAll('_', ' ') }}</h1> <img src="data:image/png;base64, {{ object.pic_hash }}"> <p>Mean Squared Error for Random Forest Model is: {{ object.rmse_rf }}</p> <p>Mean Squared Error for Linear Regression Model is: {{ object.rmse_lr }}</p> <p>R-squared for Random Forest Model: {{ object.r2_rf }}</p> <p>R-squared for Linear Regression Model: {{ object.r2_lr }}</p> <p>Mean Absolute Error for Random Forest Model is: {{ object.mae_rf }}</p> <p>Mean Absolute Error for Linear Regression Model is: {{ object.mae_lr }}</p> </div> {% endfor %} {%末端嵌段含量%} 我正在使用这个查询，它说过滤器分割无效。我该怎么办？ 我尝试了一切，希望你能帮助我解决我的问题。 我不太理解的完整代码结构 <h1>{{ object.filename|split('.').slice(0, -4).join('.')|str.replaceAll('_', ' ') }}</h1> 看来你的使用方式不正确。 尝试使用这个 {{ object.filename.split('.')[:-4]|join('.')|replace('_', ' ') }}

尝试在移动设备上使用堆叠选项卡

我试图让按钮在移动设备上全宽，选项卡式内容在移动设备上全宽，其他所有内容都应该是第 2 列按钮和第 10 列内容 .tab-内容>.tab-窗格， ....

尝试让 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 版本中自行安装它。有关确认的更准确信息，请参阅此处。