bootstrap-4 相关问题

如何让导航栏显示在英雄上方

<!-- Nav bar Contains links to self and other pages --> <nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="./index.html"> <img src="#" alt="Logo" width="55" height="30" class="d-inline-block align-text-top"> ..... </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </nav> </header> <!-- Contains main Contents of the page --> <main> <!-- Hero 1 - Bootstrap Brain Component --> <section id = "hero" class="bsb-hero-1 px-3 bsb-overlay bsb-hover-pull" style="background-image: url('./assets/img/hero-img-1.jpg');"> <div class="container-fluid"> <div class="row justify-content-md-center"> <div class="col-12 col-md-11 col-lg-9 col-xl-7 col-xxl-6 text-center text-white"> <h2 class="display-3 fw-bold mb-3">Art of Design</h2> <p class="lead mb-5">Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.</p> <div class="d-grid gap-2 d-sm-flex justify-content-sm-center"> <button type="button" class="btn bsb-btn-xl btn-light gap-3">Free Consultation</button> </div> </div> </div> </div> </section> 我想让英雄部分固定在导航栏下方，当导航栏缩小时，我希望折叠项目显示在英雄上方，我应该怎么做才能使英雄位于导航栏下方？ 要使用 Bootstrap 将小屏幕导航栏放置在英雄上方，可以使用 offcanvas 组件。您可以在这里查看： https://getbootstrap.com/docs/5.3/components/offcanvas/

设计具有两列的表单

我正在尝试在下面重新创建此页面 我对 Bootstrap 4 的网格系统非常熟悉，但我对表单感到非常困难。页面上的表单由一行和两个第 6 列组成。我是

引导程序中卡页眉和卡页脚之间的间隙

我正在尝试创建引导卡。我已经创建了卡页眉和卡页脚（但没有卡体），但我观察到页眉和页脚之间存在间隙。可能是因为没有卡体的缘故......

隐藏页面中的元素并使其仅在 Bootstrap 4 中打印时可见

有一个网页向用户显示信息。如果用户决定打印它，我想包含屏幕上不需要的附加信息，但在打印时会很有帮助。 在

隐藏页面中的div并使其仅在打印引导程序4上可见

有一个网页向用户显示信息。如果用户决定打印它，我想包含屏幕上不需要的附加信息，但在打印时会很有帮助。 在

在 Bootstrap 按钮内对齐文本

我注意到有类似的问题，但是我尝试了给定的解决方案，但没有任何效果* 我的自定义 CSS 文件 100% 正确链接到我正在处理的 html 文件 * 我正在使用 Bootstrap v4.3...

将整个变量传递给boostrap模态[重复]

我有一个主表页面，它加载查询结果，侧面有一个菜单（或者更确切地说是一组按钮）。我的问题是，当我从表中加载模态时，我只看到“id...

动态插入 DOM 元素后触发 Bootstrap JS

我使用 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(); 对不起，

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

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

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

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

PHP 刀片并排对齐扩展布局

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

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

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

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

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

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

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

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

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

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

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

Print.js 和 Bootstrap 4 渲染问题

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

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

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

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

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

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

在下面的代码中，当数据保存在浏览器中时，引导验证（绿色勾号）不会显示，但当手动输入数据时，它可以正常工作。 在下面的代码中，当数据保存在浏览器中时，引导程序验证（绿色勾号）不会显示，但当手动输入数据时，它可以正常工作。 <!doctype html> <html lang="en"> <head> <!-- Required meta tags and Bootstrap CSS --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Registration Form</title> <!-- Bootstrap CSS --> <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> <!-- First Name and Last Name --> <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> <!-- Email --> <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> <!-- Password --> <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> <!-- Confirm Password --> <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> <!-- Terms and Conditions --> <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> <!-- Submit Button --> <div class="d-grid"> <button class="btn btn-primary" type="submit">Register</button> </div> </form> </div> </div> </div> </div> <!-- Bootstrap JS and custom validation script --> <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> 类，然后在自动填充事件后重新应用它。