twitter-bootstrap-3 相关问题

引导模态弹出窗口不可点击

使用 Bootstrap 添加模式弹出窗口。单击触发按钮后，模式会变暗并且无法单击。知道是什么原因造成的或者去哪里寻找吗？ 使用 Bootstrap 添加模式弹出窗口。单击触发按钮后，模式会变暗并且无法单击。知道是什么原因造成的或去哪里查找吗？ <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> application.js //= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require miracle/jquery.noconflict //= require miracle/modernizr.2.8.3.min //= require miracle/jquery-migrate-1.2.1.min //= require miracle/jquery-ui.1.11.2.min //= require bootstrap //= require turbolinks //= require magnific-popup/jquery.magnific-popup.min //= require miracle/jquery.stellar.min //= require miracle/waypoints.min //= require owl-carousel/owl.carousel.min //= require jquery.sky.carousel/jquery.sky.carousel-1.0.2 //= require miracle/jquery.plugins //= require miracle/main //= require_tree . 当我像这样在模态中添加 data-backdrop="false" 时，我解决了同样的问题： <div class="modal fade" id="userGoing" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false"> 有时，更改 z-index 可能会弄乱 Bootstrap，因此正如他们在 Bootstrap 文档中所说，尝试将 <!-- Modal --> 块放在页面顶部。 如果它是一个可以从应用程序中的许多地方访问的模式，您可以将其放置在部分中并在您的 app/views/layouts/application.html.erb 之上调用它，如下所示（抱歉，这是一个很薄的模板，请告诉我您是否需要 erb 翻译）： doctype html html head == render 'layouts/meta' = stylesheet_link_tag … = javascript_include_tag … = csrf_meta_tags body == render 'path/to/your/modal' .container == yield == render 'layouts/footer' 否则，您可以尝试在 <%== yield :modal %> 中执行特殊的 application.html.erb 并从其他地方用 `<%- content_for :modal %> 调用它。不确定这里的 erb 语法。 此处解释：使用 Content For 方法 在同一页面添加以下代码。 #myModal{ z-index: 9999 } .modal-dialog 将 pointer-events 设置为 none。 我覆盖了该属性并设置了 pointer-events: unset; 所以： .modal-dialog { pointer-events: unset !important; } 这对我有用 过了很长一段时间，我就得到了这个简单的错误 .modal-backdrop { z-index: -1; } 谢谢。 当我从另一个模态调用一个模态时，我遇到了同样的问题（但当我只调用第一个模态时则没有）。 所以，这可能对你没有帮助，但它可以为其他人节省很多时间：我对淡入淡出效果有不同的定义，并且有与 display: inline-block 的界限。我删除了它，问题就消失了。 失败的 CSS 定义： .fade { ... display: inline-block; ... } 情况： 我使用 Razor 页面 模态（div）被渲染为主体的最后一个元素 在 _layout.cshtml 中，所有默认脚本都是在 @RenderBody 调用之后渲染的。因此，在渲染的 html 中，所有脚本标签都在那一刻渲染在正文的末尾） 在渲染的 html 中，模态 (div) 在脚本之后渲染，这导致了问题。 我是如何解决这个问题的： 我在 @RenderBody 调用 (_layout.cshtml) 之后执行了 @RenderSection("Modal") 调用。 这个 @RenderSection("Modal") 调用然后在页面上的“@section Modal{...}”内渲染 html。

隐藏或显示折叠从js

我编写了一些控制单元，通过使用引导程序中的“折叠”类来切换几个容器，例如带有锚点的列表，该锚点对我的隐藏容器“href”属性有特殊作用，这里是示例...

Twitter bootstrap 选择只读仍然可以更改选项

我有一个带有 readonly="true" 的引导选择，但我仍然可以更改所选选项。 我需要禁用=“true”行为，但是当我使用它时，选择不会提交。 我需要一个组合...

在 Bootstrap 3 中的必填字段中添加星号

我的 HTML 有一个名为 .required 的类，该类被分配给必填字段。 这是 HTML： 我的 HTML 有一个名为 .required 的类，已分配给必填字段。 这是 HTML： <form action="/accounts/register/" method="post" role="form" class="form-horizontal"> <input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' /> <div class="form-group required"> <label class="col-md-2 control-label">Username</label> <div class="col-md-4"> <input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" /> </div> </div> <div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div> <div class="form-group required"><label class="col-md-2 control-label">Password</label><div class="col-md-4"><input class="form-control" id="id_password1" name="password1" placeholder="Password" required="required" title="" type="password" /></div></div> <div class="form-group required"><label class="col-md-2 control-label">Password (again)</label><div class="col-md-4"><input class="form-control" id="id_password2" name="password2" placeholder="Password (again)" required="required" title="" type="password" /></div></div> <div class="form-group required"><label class="col-md-2 control-label">first name</label><div class="col-md-4"><input class="form-control" id="id_first_name" maxlength="30" name="first_name" placeholder="first name" required="required" title="" type="text" /></div></div> <div class="form-group required"><label class="col-md-2 control-label">last name</label><div class="col-md-4"><input class="form-control" id="id_last_name" maxlength="30" name="last_name" placeholder="last name" required="required" title="" type="text" /></div></div> <div class="form-group required"><label class="col-md-2 control-label">&#160;</label><div class="col-md-4"><div class="checkbox"><label><input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service</label></div></div></div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary"> <span class="glyphicon glyphicon-star"></span> Sign Me Up! </button> </div> </div> </form> 我将以下内容添加到我的 CSS 中； .form-group .required .control-label:after { content:"*";color:red; } 仍然没有在必填字段周围显示红色*。我在这里缺少什么？ Bootstrap 3 中不是有直接的方法可以将 * 引入必填字段吗？ 编辑 条款和条件中的*不会立即出现在复选框中。如何解决这个问题？ 使用 .form-group.required，不带空格。 .form-group.required .control-label:after { content:"*"; color:red; } 编辑： 对于复选框，您可以使用伪类：not()。您可以在每个标签后添加所需的 *，除非它是复选框 .form-group.required:not(.checkbox) .control-label:after, .form-group.required .text:after { /* change .text in whatever class of the text after the checkbox has */ content:"*"; color:red; } 注意：未经测试 您应该使用 .text 类或以其他方式定位它，尝试这个 html： <div class="form-group required"> <label class="col-md-2 control-label">&#160;</label> <div class="col-md-4"> <div class="checkbox"> <label class='text'> <!-- use this class --> <input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service </label> </div> </div> </div> 好的第三次编辑： CSS 回到原来的样子 .form-group.required .control-label:after { content:"*"; color:red; } HTML： <div class="form-group required"> <label class="col-md-2">&#160;</label> <!-- remove class control-label --> <div class="col-md-4"> <div class="checkbox"> <label class='control-label'> <!-- use this class as the red * will be after control-label --> <input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service </label> </div> </div> </div> 假设这就是 HTML 的样子 <div class="form-group required"> <label class="col-md-2 control-label">E-mail</label> <div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div> </div> 要在标签右侧显示星号： .form-group.required .control-label:after { color: #d00; content: "*"; position: absolute; margin-left: 8px; top:7px; } 或标签左侧： .form-group.required .control-label:before{ color: red; content: "*"; position: absolute; margin-left: -15px; } 要制作漂亮的大红色星号，您可以添加以下行： font-family: 'Glyphicons Halflings'; font-weight: normal; font-size: 14px; 或者如果您使用Font Awesome，请添加这些行（并更改内容行）： font-family: 'FontAwesome'; font-weight: normal; font-size: 14px; content: "\f069"; .form-group .required .control-label:after 可能应该是.form-group.required .control-label:after。删除 .form-group 和 .required 之间的空格就是变化。 使用简单的CSS， .myform .required:after { content: " *"; color: red; font-weight: 100; } <form class="myform"> <div class="col-md-12"> <label for="xxx_fname" class="form-label required">First Name</label> <input type="text" class="form-control" id="xxx_fname" > </div> <div class="col-md-12"> <label for="xxx_lname" class="form-label required">Last Name</label> <input type="text" class="form-control" id="xxx_lname" > </div> </form 另外两个答案是正确的。当您在 CSS 选择器中包含空格时，您将定位子元素，因此： .form-group .required { styles } 正在定位类为“required”的元素，该元素位于类为“form-group”的元素内。 如果没有空格，它的目标是具有 both 类的元素。 “必需”和“表单组” 这个 CSS 对我有用： .form-group.required.control-label:before{ color: red; content: "*"; position: absolute; margin-left: -10px; } 和这个 HTML： <div class="form-group required control-label"> <label for="emailField">Email</label> <input type="email" class="form-control" id="emailField" placeholder="Type Your Email Address Here" /> </div> 这对我有用： CSS .form-group.required.control-label:before{ content: "*"; color: red; } 或 .form-group.required.control-label:after{ content: "*"; color: red; } 基本 HTML <div class="form-group required control-label"> <input class="form-control" /> </div> 我修改了CSS，因为我使用的是bootstrap 3.3.6 .form-group.required label:after{ color: #d00; font-family: 'FontAwesome'; font-weight: normal; font-size: 10px; content: "\f069"; top:4px; position: absolute; margin-left: 8px; } HTML <div class="form-group required"> <label for="return_notes"><?= _lang('notes') ?></label> <textarea class="form-control" name="return_notes" id="return_notes" required="required"></textarea> </div> 只需执行以下操作... CSS .form-group.required .control-label:after { content:"*"; color:red; } HTML <form> <div class="form-group required"> <label class="control-label">Name</label> ... </div> </form> 我们可以做这样的事情： HTML <form> <div class="required"> <label class="control-label required">Name</label> <input type="text"></input> </div> </form> CSS form label.required:after { content: "*"; color: red; } 通过这种方法，表单标签内具有所需类的任何标签都将在其内容后带有“*”。

如何让表格的某些列固定，某些列可滚动？

我正在使用 twitter-bootstrap 3 开发一个网页，有些表格不适合我页面的边距。它们溢出来了。所以我想创建一个像 Excel 电子表格一样工作的结构。 最...

防止 Google 地图 InfoWindow 将焦点设置在第一个元素（即按钮）上

每当我加载包含可点击 HTML 元素（即引导按钮）的 Google 地图 InfoWindow 时，第一个可点击元素具有焦点，渲染 UX 的可读性较差。 API：...

SweetAlert 引导模式中的提示问题

我已经尝试了两天多在模式引导程序中运行 SweetAlert 提示但没有成功，输入无法访问，我不明白为什么。我需要帮助。 $("#openSWA...

Bootstrap Accordion：如何在折叠或展开元素时避免页面滚动

当尝试折叠或展开手风琴的元素时，我出现意外的页面滚动。也许我只是对 Bootstrap 网格系统做错了什么？下面是一个页面示例： 我怎样才能...

Wowjs 和 Animate.css 无法与 VUEJS 一起使用

我试图使用 wowjs 或 animate.css 包含一些动画，但它似乎不起作用。 这是我采取的步骤。 第一： npm 安装 wowjs 在 main.js 中 导入“animate.css”； 在页面...

jquery 3.7.1 与 bootstrap 3 兼容吗？

我有一个建于 2017 年的旧 Bootstrap 3 网站。我需要更新到 Bootstrap 5，但想同时更新 jquery。 jquery 3.7.1 兼容吗？

Bootstrap 3.4 版本与 JQuery 3.4 版本兼容吗？

Bootstrap 3.4 版本与 JQuery 3.4 版本兼容吗？或者我需要升级到 Bootstrap 版本 4 吗？ 我不能使用 3.4 版之前的较低版本的 JQuery，因为根据我们的...

将表格行分成多行（响应式布局）

我有一个列出项目的网页。默认模板使用一个表格来实现这一点，我认为这非常合适。然而，在此表中，有一列包含的文本比其他列多得多：

引导表“每页项目”下拉列表不起作用

我使用引导表来呈现我的数据。 一切正常，但有一个下拉菜单可以选择每页的项目数 有我的代码。你有什么想法吗，也许版本有一些问题......

电话号码验证bootstrap3

我正在尝试在我的网站中创建一个表单，以便人们能够输入电话号码并提交表单。但是当我输入字母而不是数字时，它仍然被接受。无论如何我可以检查一下...

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

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

引导响应式表格内容包装

我有与此类似的 HTML： 公告 我有与此类似的 HTML： <div class="table-responsive"> <table class="table borderless"> <caption> <h3>Announcements</h3> </caption> <tbody> <tr > <td> If you are waiting for your certificate from your trainer, please contact them. Our turnaround time is between 1-2 months from the time we receive your details from your trainer, which we expect to be at the start of your program. The remainder is dependent upon how quickly your trainer has send in all the required paperwork and made payment, etc. </td> </tr> </tbody> </table> </div> 当我在小视口中查看输出时，表格会正确调整大小，但表格单元格中的段落内容不会换行，因此会显示滚动条。我预计响应行为会包裹段落内容。我该如何实现这一目标？ 只需简单地使用如下所示，它就会自动换行表格中的任何长文本。不需要别的 <td style="word-wrap: break-word;min-width: 160px;max-width: 160px;">long long comments</td> 因此您可以使用以下内容： td { white-space: normal !important; // To consider whitespace. } 如果这不起作用： td { white-space: normal !important; word-wrap: break-word; } table { table-layout: fixed; } 我遇到了与您相同的问题，但上述答案没有解决我的问题。我能够解决这个问题的唯一方法是创建一个类并使用特定的宽度来触发我的特定用例的包装。作为示例，我在下面提供了一个片段 - 但我发现您需要针对相关表格调整它 - 因为我通常根据布局使用多个 colspan。我认为 Bootstrap 失败的原因是因为它消除了包装约束以获得滚动条的完整表格。 colspan 一定是把它绊倒了。 <style> @media (max-width: 768px) { /* use the max to specify at each container level */ .specifictd { width:360px; /* adjust to desired wrapping */ display:table; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } } 我希望这有帮助 该行为是故意的： 通过将任何 .table 包装在 .table-responsive 中来创建响应式表格使它们在小型设备上水平滚动（768px 以下）。当查看宽度大于 768 像素的任何内容时，您不会在这些表格中看到任何差异。 这意味着表格默认是响应式的（正在调整其大小）。但前提是您希望在没有足够空间时不破坏表格线条并添加滚动条，请使用 .table-responsive 类。 如果您查看 bootstrap 的源代码，您会注意到有一个媒体查询仅在 XS 屏幕尺寸上激活，并将表格文本设置为 white-space: nowrap，这会导致其不会中断。 TL;博士;解决方案 只需从 html 代码中删除 .table-responsive 元素/类即可。 编辑 我认为你的桌子一开始没有响应的原因是你没有包装像这样的 .container、.row 和 .col-md-x 类 <div class="container"> <div class="row"> <div class="col-md-12"> <!-- or use any other number .col-md- --> <div class="table-responsive"> <div class="table"> </div> </div> </div> </div> </div> 有了这个，您仍然可以使用 <p> 标签，甚至使其响应。 请参阅 Bootply 示例此处 UberNeo 的回复是好的，我喜欢它，因为除了 TD 之外，你不需要修改任何其他内容。唯一的一点是，您还必须在样式中添加“white-space:normal”，以保持表格的响应特性，如果没有，在某些分辨率下，不会进行换行，表格也不会滚动出现。 style="word-wrap: break-word;min-width: 160px;max-width: 160px;white-space:normal;" .table td.abbreviation { max-width: 30px; } .table td.abbreviation p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } <table class="table"> <tr> <td class="abbreviation"><p>ABC DEF</p></td> </tr> </table> 那么好吧。您可以使用 CSS 自动换行属性。像这样的东西： td.test /* Give whatever class name you want */ { width:11em; /* Give whatever width you want */ word-wrap:break-word; } 在 css 外部文件中使用它。 .td-table { word-wrap: break-word; word-break: break-all; white-space: normal !important; text-align: justify; } 就这样做 style="word-wrap: break-word min-width:; max-width:;" 然后设置你想要的width 在 Bootstrap 5.0 中这样做： <td class="w-50 text-break">teeeeeeeeeeeeeeest</> 您可以根据文档使用w-25或其他东西 在 bootstrap 5 及以上版本中： 2024 年 3 月 5 日 下午 4:20 文字现在可以正常换行。 使用 table-responisve 类添加新类“tableresp”，然后在 js 文件中添加以下代码 $(".tableresp").on('click', '.dropdown-toggle', function(event) { if ($('.dropdown-menu').length) { var elm = $('.dropdown-menu'), docHeight = $(document).height(), docWidth = $(document).width(), btn_offset = $(this).offset(), btn_width = $(this).outerWidth(), btn_height = $(this).outerHeight(), elm_width = elm.outerWidth(), elm_height = elm.outerHeight(), table_offset = $(".tableresp").offset(), table_width = $(".tableresp").width(), table_height = $(".tableresp").height(), tableoffright = table_width + table_offset.left, tableoffbottom = table_height + table_offset.top, rem_tablewidth = docWidth - tableoffright, rem_tableheight = docHeight - tableoffbottom, elm_offsetleft = btn_offset.left, elm_offsetright = btn_offset.left + btn_width, elm_offsettop = btn_offset.top + btn_height, btn_offsetbottom = elm_offsettop, left_edge = (elm_offsetleft - table_offset.left) < elm_width, top_edge = btn_offset.top < elm_height, right_edge = (table_width - elm_offsetleft) < elm_width, bottom_edge = (tableoffbottom - btn_offsetbottom) < elm_height; console.log(tableoffbottom); console.log(btn_offsetbottom); console.log(bottom_edge); console.log((tableoffbottom - btn_offsetbottom) + "|| " + elm_height); var table_offset_bottom = docHeight - (table_offset.top + table_height); var touchTableBottom = (btn_offset.top + btn_height + (elm_height * 2)) - table_offset.top; var bottomedge = touchTableBottom > table_offset_bottom; if (left_edge) { $(this).addClass('left-edge'); } else { $('.dropdown-menu').removeClass('left-edge'); } if (bottom_edge) { $(this).parent().addClass('dropup'); } else { $(this).parent().removeClass('dropup'); } } }); var table_smallheight = $('.tableresp'), positioning = table_smallheight.parent(); if (table_smallheight.height() < 320) { positioning.addClass('positioning'); $('.tableresp .dropdown,.tableresp .adropup').css('position', 'static'); } else { positioning.removeClass('positioning'); $('.tableresp .dropdown,.tableresp .dropup').css('position', 'relative'); }

表格内的引导下拉列表不适用于 .table-responsive

这是现场示例的链接。 http://www.codeply.com/go/uBnL1bBs6v 从中您可以看到，当我将图层应用到...

模板中的 Django 使用 if 标签将一个变量与数字进行比较总是给出 false

我首先使用 widthratio 标签来计算比率百分比数字并将其分配给名为 Ratio 的变量 然后，当我尝试将它与 if 和 elif 标记中的整数进行比较时，if 和 elif 标记似乎......

将最小弹性框高度设置为内容的高度

当我调整窗口大小时，元素可能会突出其父元素。 有什么方法可以保证： .split-content 最小高度等于其内容 + m... 当我调整窗口大小时，<input>元素可能会突出其父级<div>。 有什么方法可以保证： .split-content最小高度等于内容+边距 .split-heading 与 .split-content 具有相同的高度 我有以下标记： .split { display: flex; align-items: center; justify-content: center; height: 100%; } .split-heading { border-radius: 8px 0 0 8px; min-width: 3em; } .split-content { flex-grow: 1; flex-direction: column; align-items: flex-start; border-radius: 0 8px 8px 0; padding: 0 2rem; background: #ecf0f1; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div style="position:absolute; top:15px; right:15px; bottom:15px; left:15px"> <div style="display:flex; flex-direction:column; height:100%; width:100%"> <div style="position:relative; flex:1; width:100%; height:100%;"> <div style="position:absolute; top:0; right:0; bottom:0; left:0"> <!-- from here onwards i can change stuff the upper part comes from the framework --> <div class="split split-container "> <div class="split split-heading bg-primary"> <h2> 1 </h2> </div> <div class="split split-content"> <h3>Heading</h3> <input type="text" class="form-control" placeholder="..." readonly="TRUE"> </div> </div> </div> </div> </div> </div> 只需使用网格而不是弹性 .split { display: grid; grid-template-columns: 3em 1fr; align-items: center; justify-content: center; height: 100%; } .split-heading { border-radius: 8px 0 0 8px; display: flex; align-items: center; justify-content: center; } .split-content { display: flex; flex-grow: 1; flex-direction: column; align-items: flex-start; border-radius: 0 8px 8px 0; padding: 0 2rem; background: #ecf0f1; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div style="position:absolute; top:15px; right:15px; bottom:15px; left:15px"> <div style="display:flex; flex-direction:column; height:100%; width:100%"> <div style="position:relative; flex:1; width:100%; height:100%;"> <div style="position:absolute; top:0; right:0; bottom:0; left:0"> <!-- from here onwards i can change stuff the upper part comes from the framework --> <div class="split split-container "> <div class="split split-heading bg-primary"> <h2> 1 </h2> </div> <div class="split split-content"> <h3>Heading</h3> <input type="text" class="form-control" placeholder="..." readonly="TRUE"> </div> </div> </div> </div> </div> </div>

Bootstrap 响应式表格在 iOS 设备上无法水平滚动

我有一个带有以下标记的表格： 正如文件...