bootstrap-4 相关问题

我使用 bootstrap-toogle 来制作精美的复选框。它适用于页面加载，但如果我通过 JS 动态插入输入元素，它会显示默认复选框。我使用 bootstrap-toogle 来制作精美的复选框。它适用于页面加载，但如果我通过 JS 动态插入输入元素，它会显示默认复选框。 <link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css"> <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script> <div class="row"><label for="button_1">Button 1 </label><input type="checkbox" id="button_1" name="button_1" checked="checked" data-toggle="toggle"></div> <div id="add">ADD button</div> <script type="text/javascript"> $(document).on("click", "#add", function() { var number = $("div.row").length + 1; var content = "<div class=\"row\"><label for=\"button_"+number+"\">Button "+number+" </label><input type=\"checkbox\" id=\"button_"+number+"\" name=\"button_"+number+"\" checked=\"checked\" data-toggle=\"toggle\"></div>"; $("div.row").last().after(content); }); </script> 这是一个小提琴：https://jsfiddle.net/8w3dk264/ 有没有办法可以在动态插入元素后触发 bootstrap-toogle 代码？谢谢，天哪，我应该阅读手册:( 就这么简单： $(elem).bootstrapToggle(); 对不起，

javascript checkbox bootstrap-4

回答 1 投票 0

重新定位下拉元素，使它们位于下拉控件下

我继承了这个应用程序，而我只是 C# 和 Bootstrap 的初学者，所以请像我是白痴一样解释它，因为我就是。 :-) 我有一个读取其元素的下拉控件...

javascript bootstrap-4

回答 1 投票 0

使用粘性第一列和行实现滚动`ngx-datatable`

当行数或列数增加时，内容不完全可见。如何实现滚动功能，确保滚动时第一列第一行保持固定（粘性）...

css angular bootstrap-4 sass

回答 1 投票 0

PHP 刀片并排对齐扩展布局

我正在尝试构建一个响应式仪表板，使用侧边栏在右侧进行导航，我将侧边栏构建为布局，并通过使用

javascript laravel bootstrap-4 laravel-blade

回答 1 投票 0

Bootstrap 中的响应式标题布局问题：在移动视图中对齐徽标和搜索栏

我目前正在使用 Bootstrap 构建响应式标头。该布局在桌面版本上运行良好，但在移动视图中遇到一些对齐问题。这是关于什么的简要描述...

css bootstrap-4

回答 1 投票 0

当只有一行文本时，CSS 内容无法正确对齐

我有以下代码。一切都工作得很好，除了当浏览器足够宽以至于文本只有一行时，“帖子”会错位。例子：我搞砸了...

javascript html css bootstrap-4

回答 1 投票 0

覆盖 div 页面上的引导侧间隙

我正在使用 bootstrap 4.3.1、ASP.NET MVC (.NET 5)，所有页面的侧面都有间隙，这很好，但我希望一个 div 忽略这一点，并占宽度的 80% 并居中，而剩下的...

html css twitter-bootstrap bootstrap-4

回答 1 投票 0

我可以在 Bootstrap 轮播幻灯片中添加包含多个图像的 div 吗？如果是这样，我该怎么做？

我的 HTML 页面上有一个轮播滑块，我想将其制作为每张幻灯片都是一个包含多个图像的 div，如下所示：我已经尝试将其添加到...

html bootstrap-4 carousel

回答 3 投票 0

导航栏与滑动条重叠（CSS）

我有一个带有导航栏和滑动栏的测试网站。我试图让侧边栏堆叠在导航栏上或调整导航栏的大小。我认为页脚很好，因为它的位置是固定的。我会...

html css bootstrap-4

回答 2 投票 0

Print.js 和 Bootstrap 4 渲染问题

尝试使用PrintJS打印标签中的信息。由于某种原因，它拒绝正确渲染。我有这个：当我打印时，我得到这个：我正在使用以下代码进行打印：

bootstrap-4 printjs

回答 1 投票 0

类型错误：无法读取 null 的属性（读取“1”）

嗨，我正在使用创意 Tim Dark 反应模板。我收到以下错误图像错误。请参阅图片了解更多详情。

reactjs bootstrap-4 reactstrap

回答 2 投票 0

使用 Asp.net Core MVC Bootstrap 4，我无法让不显眼的验证在服务器端添加的模型状态错误中正常工作

视图模型上的验证注释似乎一切都很好。但是，当我在服务器端（在表单发布之后）进行一些额外的验证并添加

jquery asp.net-mvc bootstrap-4 unobtrusive-validation

回答 1 投票 0

使用浏览器保存数据时引导表单不显示验证

在下面的代码中，当数据保存在浏览器中时，引导验证（绿色勾号）不会显示，但当手动输入数据时，它可以正常工作。在下面的代码中，当数据保存在浏览器中时，引导程序验证（绿色勾号）不会显示，但当手动输入数据时，它可以正常工作。 <!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Registration Form</title>  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <style> /* Optional: Adjust form width on larger screens */ .registration-form { max-width: 500px; margin: auto; } /* Remove autofill background color in Chrome */ input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Changes background to white */ -webkit-text-fill-color: #000 !important; /* Ensures text remains black */ } </style> </head> <body> <div class="container mt-5"> <div class="registration-form"> <div class="card"> <div class="card-body"> <h3 class="card-title text-center mb-4">Register</h3> <form class="needs-validation" novalidate>  <div class="row"> <div class="col-md-6 mb-3"> <label for="firstName" class="form-label">First Name</label> <input type="text" class="form-control" id="firstName" pattern="^[A-Za-z]+$" placeholder="First Name" required> <div class="invalid-feedback"> Please enter your first name (letters only). </div> </div> <div class="col-md-6 mb-3"> <label for="lastName" class="form-label">Last Name</label> <input type="text" class="form-control" id="lastName" pattern="^[A-Za-z]+$" placeholder="Last Name" required> <div class="invalid-feedback"> Please enter your last name (letters only). </div> </div> </div>  <div class="mb-3"> <label for="emailAddress" class="form-label">Email</label> <input type="email" class="form-control" id="emailAddress" placeholder="Email" required> <div class="invalid-feedback"> Please enter a valid email address. </div> </div>  <div class="mb-3"> <label for="password" class="form-label">Password</label> <input type="password" class="form-control" id="password" minlength="6" placeholder="Password" required> <div class="invalid-feedback"> Please enter a password with at least 6 characters. </div> </div>  <div class="mb-3"> <label for="confirmPassword" class="form-label">Confirm Password</label> <input type="password" class="form-control" id="confirmPassword" minlength="6" placeholder="Confirm Password" required> <div class="invalid-feedback"> Passwords do not match. </div> </div>  <div class="form-check mb-3"> <input type="checkbox" id="terms" class="form-check-input" required> <label class="form-check-label" for="terms">I agree to the terms and conditions</label> <div class="invalid-feedback"> You must agree to the terms and conditions. </div> </div>  <div class="d-grid"> <button class="btn btn-primary" type="submit">Register</button> </div> </form> </div> </div> </div> </div>  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <script> (() => { 'use strict'; // Fetch all the forms we want to apply custom Bootstrap validation styles to const forms = document.querySelectorAll('.needs-validation'); // Trigger validation for autofilled fields on page load const triggerAutofillValidation = () => { const autofillFields = document.querySelectorAll('input:-webkit-autofill'); // Dispatch an input event for each autofilled field to trigger validation autofillFields.forEach(field => { field.dispatchEvent(new Event('input', { bubbles: true })); }); }; // On window load, trigger autofill validation window.addEventListener('load', triggerAutofillValidation); // Loop over each form and prevent submission if invalid Array.from(forms).forEach(form => { // Password and Confirm Password fields const password = form.querySelector('#password'); const confirmPassword = form.querySelector('#confirmPassword'); // Event listener to validate password match confirmPassword.addEventListener('input', function () { if (confirmPassword.value !== password.value) { confirmPassword.setCustomValidity('Passwords do not match'); } else { confirmPassword.setCustomValidity(''); } }); // Form submission event form.addEventListener('submit', event => { // Check for validity if (!form.checkValidity()) { event.preventDefault(); event.stopPropagation(); } // Add Bootstrap validation classes form.classList.add('was-validated'); }, false); }); })(); </script> </body> </html> 请参阅以下图片以供参考手动输入数据时使用浏览器保存的数据时当浏览器保存的数据也被使用时，我要得到什么标记。另一位用户在 Github 上讨论了这个问题：https://github.com/twbs/bootstrap/issues/39530 根据我的搜索，我找到了这个链接：https://devcodef1.com/news/1402208/bootstrap-form-validation-issue（我建议不要打开....由于有很多通知它包含！）以下是上述网站上所写内容的摘要：此错误涉及 Bootstrap 的内置验证样式，该样式会干扰浏览器恢复表单字段中保存的数据的能力。我的意思是，当 .was-validated 类应用于 <form> 元素时，它会阻止浏览器正确恢复数据。您可以在代码中尝试使用 JavaScript 从 .was-validated 元素中删除 <form> 类，然后在自动填充事件后重新应用它。

javascript html css bootstrap-4

回答 1 投票 0

Bootstrap 模式将页面滚动到顶部

打开模式的按钮位于页面底部附近，但模式在顶部打开并将页面滚动到顶部。我想要：停止将页面滚动到顶部，在当前视图中显示模态...

html css bootstrap-4 bootstrap-modal overflow

回答 2 投票 0

Bootstrap 4：如何内联应该隐藏在小屏幕上的文本？

对于这个特定的应用程序，我试图在较小的屏幕上隐藏文本，只显示左侧的图标（来自 font Awesome 的评论图标）：对于这个特定的应用程序，我试图在较小的屏幕上隐藏文本，只显示左侧的图标（来自 font Awesome 的评论图标）： <a id="newCommentLink" href="#"> <i class="fa fa-comments text-secondary"></i> <span class="d-none d-md-block">Comment</span> </a> 从上面的代码中可以看到，我想要的是文本“评论”在移动屏幕（xs 和 sm 尺寸）上隐藏，因此它只显示在中到大尺寸的屏幕上。但是，此 HTML 代码将在图标下方显示文本“注释”，而不是在图标旁边。我无法内联图标和文本。有人知道如何解决这个问题，使文本与图标内联显示吗？几个选项：只需在 d-flex 上使用 a <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <a class='d-flex' id="newCommentLink" href="#"> <i class="fa fa-comments text-secondary"></i> <span class="d-none d-md-block">Comment</span> </a> 使用 d-md-inline-block / d-md-inline-flex 代替 d-md-block <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <a id="newCommentLink" href="#"> <i class="fa fa-comments text-secondary"></i> <span class="d-none d-md-inline-block">Comment</span> </a>

html css twitter-bootstrap bootstrap-4

回答 1 投票 0

bootstrap-4 相关问题

最新问题