twitter-bootstrap 相关问题

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

我有一个用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; } 希望这就是您正在寻找的🥶🥶🥶🥶🥶🥶

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

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

为什么从 javascript 中的表单输入中检索到的值返回空值或 null 值？

记录问题变量会返回在下拉列表中选择的选项，但记录深度变量不会返回任何内容。 记录问题变量会返回在下拉列表中选择的选项，但记录深度变量不会返回任何内容。 <body> <form class="card p-4" method="POST" id="form"> <label for="problem_selector">Problem</label> <select id="problem_selector" class="form-control" name="problem_name"> <option value="3and5multiples.php">Multiples of 3 and 5</option><br> <option value="even_fibonacci.php">Even fibonacci numbers</option><br> </select> <label for="depth_input">Depth</label> <input id="depth_input" class="form-control" name="depth_input">test</input> <input id="submit_button" value = "submit" type="button" class="btn btn-primary"/> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> let problem = document.getElementById("problem_selector").value; let depth = document.getElementById("depth_input").value; const button = document.getElementById("submit_button"); button.addEventListener('click', function() { console.log(depth); console.log(problem); }); </script> 单击提交按钮时截取的屏幕截图。 按下按钮后，深度值应与问题值一起记录。 我已经将提交按钮更改为输入按钮，但这似乎没有帮助。以前返回的值为 null；但现在该值只是空的。 读取按钮值的代码在页面加载时立即运行。单击按钮后您需要读取值： const button = document.getElementById("submit_button"); button.addEventListener('click', function() { let problem = document.getElementById("problem_selector").value; let depth = document.getElementById("depth_input").value; console.log(depth); console.log(problem); });

如何防止下拉菜单内的 Bootstrap 列表内联换行？

在此代码段中，“按日期”行分为两行，第一行是“最近的第一行”，第二行是“最早的第一行”。 我使用 .list-inline 尝试将项目强制到一行......

如何验证引导程序中的密码字段？

我正在使用 bootstrap 在 asp.net 中工作。我想验证密码字段。当用户单击密码字段时，我的代码显示信息框。 需要密码... 我正在使用 bootstrap 在 asp.net 中工作。我想验证密码字段。当用户单击密码字段时，我的代码显示信息框。 <div id="pswd_info"> <h4>Password requirements:</h4> <ul> <li id="letter" class="invalid fa-warning"> At least <strong>one letter</strong></li> <li id="capital" class="invalid"> At least <strong>one capital letter</strong></li> <li id="number" class="invalid"> At least <strong>one number</strong></li> <li id="special" class="invalid"> At least <strong>one special character</strong></li> <li id="length" class="invalid"> Be at least <strong>8 characters</strong></li> </ul> </div> javascript <!-- password info box--> <script> $(document).ready(function () { $('#password').keyup(function () { // set password variable var pswd = $(this).val(); //validate the length if (pswd.length < 8) { $('#length').removeClass('valid').addClass('invalid'); } else { $('#length').removeClass('invalid').addClass('valid'); } //validate letter if (pswd.match(/[A-z]/)) { $('#letter').removeClass('invalid').addClass('valid'); } else { $('#letter').removeClass('valid').addClass('invalid'); } //validate capital letter if (pswd.match(/[A-Z]/)) { $('#capital').removeClass('invalid').addClass('valid'); } else { $('#capital').removeClass('valid').addClass('invalid'); } //validate number if (pswd.match(/\d/)) { $('#number').removeClass('invalid').addClass('valid'); } else { $('#number').removeClass('valid').addClass('invalid'); } //validate special character if (pswd.match(/[!@#$ %^&*]/)){ $('#special').removeClass('invalid').addClass('valid'); } else { $('#special').removeClass('valid').addClass('invalid'); } }); $('#password').focus(function () { $('#pswd_info').show(); }); $('#password').blur(function () { $('#pswd_info').hide(); }); }); </script> 上面的代码只是显示信息框并根据用户输入更改每个 li。但是，仍然接受任何不符合标准的密码。如何验证#password 字段？我已经有了下面的脚本来验证其他字段 JavaScript <script> // initialize the validator function validator.message.date = 'not a real date'; // validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup': $('form') .on('blur', 'input[required], input.optional, select.required', validator.checkField) .on('change', 'select.required', validator.checkField) .on('keypress', 'input[required][pattern]', validator.keypress); $('.multi.required').on('keyup blur', 'input', function() { validator.checkField.apply($(this).siblings().last()[0]); }); $('form').submit(function(e) { e.preventDefault(); var submit = true; // evaluate the form using generic validaing if (!validator.checkAll($(this))) { submit = false; } if (submit) this.submit(); return false; }); </script> 最少八个字符，至少一个字母和一个数字： "^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$" 最少八个字符，至少一个字母、一个数字和一个特殊字符： "^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$" 最少八个字符，至少一个大写字母，一个小写字母和一个数字： "^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$" 最少 8 个字符，至少 1 个大写字母、1 个小写字母、1 个数字和 1 个特殊字符： "^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}" 最少 8 个、最多 10 个字符，至少 1 个大写字母、1 个小写字母、1 个数字和 1 个特殊字符： "^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,10}" 您可以编写简单的这一行来检查所有内容： <input type="password" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>

如何使用 HTML/CSS 调整动画 GIF 的大小？

我正在做一个考试项目。 我刚刚才注意到，网页严重依赖的动画 GIF 不会根据容器或窗口宽度调整大小。我是你...

不要将 Bootstrap 列表内联包装在下拉菜单中

在此代码段中，“按日期”行分为两行，第一行是“最近的第一行”，第二行是“最早的第一行”。 我使用 .list-inline 尝试将项目强制到一行......

Bootstrap 4 粘性顶部边距顶部

我有元素侧边栏和div，带有粘性顶部类： .... ... 我有元素侧边栏和 div 类 sticky-top: <div class="row"> <div class="col-lg-4"> <div class="sticky-top"> .... </div> </div> </div> 当侧边栏粘性时，我需要传递一个边距，因为类粘性顶部没有边距顶部。 侧边栏粘滞时如何书写边距？ 尝试： .sticky-top { top: 0.5em; } 您需要使用 top 而不是 margin-top <div class="row"> <div class="col-lg-4"> <div class="sticky-top" style="top: 30px"> .... </div> </div> </div> 尝试使用： .sticky-top{ margin-top:10px; } 如果它给你带来麻烦，你可以用!important强制它，就像这样： .sticky-top{ margin-top:10px !important; } 请注意，仅当其他解决方案不起作用时才应使用 !important。 希望有帮助！ 为了提高响应能力，您可以使用 [class*="sticky-"] { top: 1rem; } 以便它可以适用于所有响应式变体。即 sticky-md-top、sticky-lg-top 等

Bootstrap 导航栏品牌左边距不重要

我正在尝试像这样覆盖引导类导航栏品牌的左边距 .navbar .navbar-品牌{ 左边距：15px； 背景： url("../img/logo.png") 无重复； } 基本的东西正确...

如何更改引导滑块按钮颜色

如何更改引导滑块按钮颜色？ 如何更改引导滑块按钮颜色？ <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-lg-8 col-md-12 col-sm-12"> <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4> <div class="client-info d-flex my-5"> <div class="img rounded-circle mx-3"> <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt=""> </div> <div class="info"> <h5>Jenny Wilson</h5> <p>Vice President</p> </div> </div> </div> <div class="carousel-item active"> <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4> <div class="client-info d-flex my-5"> <div class="img rounded-circle mx-3"> <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt=""> </div> <div class="info"> <h5>Jenny Wilson</h5> <p>Vice President</p> </div> </div> </div> <div class="carousel-item active"> <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4> <div class="client-info d-flex my-5"> <div class="img rounded-circle mx-3"> <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt=""> </div> <div class="info"> <h5>Jenny Wilson</h5> <p>Vice President</p> </div> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script> 您可以创建如下规则： .carousel-control-prev-icon { color: blue; background-color: green; } .carousel-control-prev-icon { color: blue; background-color: green; } <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-lg-8 col-md-12 col-sm-12"> <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4> <div class="client-info d-flex my-5"> <div class="img rounded-circle mx-3"> <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt=""> </div> <div class="info"> <h5>Jenny Wilson</h5> <p>Vice President</p> </div> </div> </div> <div class="carousel-item active"> <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4> <div class="client-info d-flex my-5"> <div class="img rounded-circle mx-3"> <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt=""> </div> <div class="info"> <h5>Jenny Wilson</h5> <p>Vice President</p> </div> </div> </div> <div class="carousel-item active"> <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4> <div class="client-info d-flex my-5"> <div class="img rounded-circle mx-3"> <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt=""> </div> <div class="info"> <h5>Jenny Wilson</h5> <p>Vice President</p> </div> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>

如何在4级下拉菜单中添加滚动条[关闭]

我想在桌面模式下的第二个和第三个下拉菜单中添加更多选项，但列表太长。如何设置 y 轴滚动？ 演示 /* 导航栏 ===================================*/ nav.navbar.boo...