Bootstrap 4是流行的前端组件库的第四个主要版本。 Bootstrap框架有助于创建响应迅速，移动优先的网站和Web应用程序。
*尝试根据用户输入创建动态响应，但甚至没有出现警报按钮。但是当我摆脱 {% for message in messages%} 时，会出现一个空的警报按钮。 ** 这是部分...
我试图在列表组中的每个列表组项目中实现两个链接，每个链接显示不同的模式。以下是列表组项目之一的示例代码。 我试图在列表组中的每个列表组项目中实现两个链接，每个链接显示不同的模式。以下是列表组项目之一的示例代码。 <button type="button" class="list-group-item list-group-item-action" data-id="123" data-toggle="modal" data-target="#membership-modal"> <span class="font-weight-bold">Peter Haworth</span> <a class="fa fa-info-circle text-secondary float-right" data-memberid="123" data-toggle="modal" data-target="#history-modal" data-name="Peter Haworth" style="font-size:20px;"></a><br> 1 year Individual, expiration 12/31/2023 </button> 如果用户单击列表组项目的主体，则会按预期显示成员资格模式。 如果用户单击信息图标，我希望显示历史模式，但显示会员模式。但是，当我关闭会员模式时，历史模式位于其后面，因此它正在显示，但被会员模式隐藏。 如何防止单击信息图标时显示会员模式？ 将信息图标移到按钮之外。您同时单击了按钮和信息图标，因此您会遇到问题。 为了确保它仍然是一个 list-group-item，将所有内容包装在 div 中。并将图标放置在您想要的位置。按钮周围的 div 必须是 position: relative 才能正常工作。 <div class="list-group"> <div class="position-relative"> <a class="fa fa-info-circle text-secondary position-absolute" data-memberid="123" data-toggle="modal" data-target="#history-modal" data-name="Peter Haworth" style="font-size:20px; z-index: 10; top: 10px; right: 10px"></a> <button type="button" class="list-group-item list-group-item-action" data-id="123" data-toggle="modal" data-target="#membership-modal"> <span class="font-weight-bold">Peter Haworth</span> <p>1 year Individual, expiration 12/31/2023</p> </button> </div> </div> 参见 jsfiddle 示例
toggle classList（'open'）正在工作并出现在检查元素中，但网页未显示样式
我想在单击#menu-icon后使用.nav中的切换添加类.open，在我单击#menu-icon后，类“open”出现在检查元素中，但.nav未显示任何内容风格在 .o...
我必须在反应标签的占位符中添加一个位置图标。 地点 我必须在反应标签的占位符中添加一个位置图标。 <label> Places <input className="p-2" type="text" placeholder="Places of the Package" ></input> </label> chatgpt 说以下代码 <label> Places <div class="input-group"> <input type="text" class="form-control" placeholder="Places of the Package" /> <span class="input-group-text"> <i class="bi bi-geo-alt"></i> </span> </div> </label> 但这也没有奏效。对于这个问题有什么替代方案吗？ 您需要使用 npm i bootstrap-icons 安装 Bootstrap 图标 查看官方 Boostrap Icons 存储库以了解更多信息。
我尝试定位 div 元素，但无法达到我想要的效果。 .tab-垂直{ 边框：1px 纯黑； } 我尝试定位 div 元素，但无法达到我想要的效果。 .tab-vertical { border: 1px solid black; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <div class="tab-vertical"> <ul class="nav nav-tabs" id="myTab3" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="vertical-tab" data-toggle="tab" href="" role="tab" aria-controls="Notes" value="A" onclick="javascript:void()" aria-selected="true"> <img src="https://w7.pngwing.com/pngs/512/200/png-transparent-iphone-4s-desktop-baby-blocks-android-abc-game-photography-toy-block.png" alt="Notes" style="width: 23px; height: 20px; margin:2px 0px 3px 3px;"> </a> </li> </ul> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> .tab-vertical { border: 1px solid black; display: flex; align-items: flex-start; /* Align items at the top */ } .tab-vertical .nav-tabs { flex-direction: column; /* Arrange tabs vertically */ } .tab-icon { display: flex; align-items: center; } .tab-icon img { width: 23px; height: 20px; margin: 2px 0px 3px 3px; } <div class="tab-vertical"> <ul class="nav nav-tabs" id="myTab3" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="vertical-tab" data-toggle="tab" href="#tab-content" role="tab" aria-controls="Notes" aria-selected="true"> <div class="tab-icon"> <img src="https://w7.pngwing.com/pngs/512/200/png-transparent-iphone-4s-desktop-baby-blocks-android-abc-game-photography-toy-block.png" alt="Notes"> </div> </a> </li> </ul> <div class="tab-content" id="tab-content"> <!-- Tab content goes here --> </div> </div>
访问另一个分页页面或正在搜索时按钮不起作用（ajax、Laravel）
在索引页中搜索后，按钮动作不起作用。 访问第二页时，操作按钮不起作用。 这是我的索引页 在索引页中搜索后，按钮动作不起作用。 访问第二页时，操作按钮不起作用。 这是我的索引页 <a href="#" class="btn btn-primary btn-active-primary btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end"> {{actions}} <span class="svg-icon svg-icon-5 m-0"> <svg xmlns="http://www.w3.org/2000/svg" width="24" </svg> </span> </a> <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4" data-kt-menu="true"> <div class="menu-item px-3"> <a href="{{ route('index.show', $index->id) }}" class="menu-link px-3"> {{View Details}} </a> </div> 这是路线 Route::prefix('example')->name('examples.')->group(function () { Route::get('', [ExampleController::class, 'index'])->name('index'); }); 这是脚本 $(document).on("click", "#pagination a, #search_btn, #reset_btn", function() { if(this.id == 'reset_btn'){ $("#searchform").reset(); } $.ajax({ url: this.dataset.url, type: 'get', data: $("#searchform").serialize(), processData: false, cache: false, contentType: false, success: function(data) { $("#pagination_data").html(data); }, failure: function (response) { alert(response.responseText); }, error: function (response) { alert(response.responseText); } }); }) });``` 只需将以下代码插入按钮功能脚本即可解决该错误。 KTMenu.createInstances(); KTMenu.createInstances(); 它确实有效，但如果你使用的话会更好 KTComponents.init(); 所有其他组件，如 Select2、PageLoading、Menu、Scroll 等均通过此一次调用进行初始化。
CSS - 根据同一 Div 内的图像颜色更改 Div 背景颜色
我想在将鼠标悬停在 div 上时更改其背景颜色，具体取决于同一 div 内的图标。 有人知道使用什么（CSS，Bootstrap ...）来以简单的方式做到这一点，以及如何做？ 那我...
我有一个用于 React 应用程序的 Bootstrap 模板。在模板内部，有一段 JS 应该使标题在滚动时粘住。它可以在纯 HTML 中运行，但是当我移动时...
https://plnkr.co/edit/VurNxK9RnJ3ccHSJ?open=lib%2Fscript.js 为什么第一个 div 计算机过滤器在移动视图上不采用全宽？ 即使我已经为该 div 指定了 100% 宽度： @media（分钟-
我在页面中嵌套了引导程序导航组件。发生的情况是，如果我单击工作正常的“嵌套选项卡 2”，然后单击“嵌套选项卡 1”，因为您可以看到 Neste 的选项卡内容...
我想显示带有 4 个命名选项的引导范围 做出你的选择 我想显示 bootstap range 以及 4 个命名选项 <div class="form-group"> <label for="customRange2">Make your choice</label> <input type="range" class="custom-range" min="1" max="4" id="customRange2" value="1"> <div class="container"> <div class="row"> <div class="col-sm text-left"> option 1 </div> <div class="col-sm text-center"> option #2 </div> <div class="col-sm text-center"> option ##3 </div> <div class="col-sm text-right"> option with text </div> </div> </div> </div> 但是文本对齐得不好（参见https://jsfiddle.net/duwLt21z/）。 我该如何解决它？ 可以说，学习 Bootstrap 最难的事情是认识到你应该停止使用它的类并编写自己的类： .la-wrapper { background: #f8f9fa; margin-top: 15px; padding-top: 15px; } .la { height: 1.5rem; display: flex; align-items: center; justify-content: space-between; padding: 15px .5rem; position: relative; } .la span { position: absolute; transform: translateX(-50%); top: -.5rem; width: 25%; text-align: center; } @media (max-width: 768px) { .la { height: 3rem; } } @media (max-width: 576px) { .la { display: none; } } <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <div class="container"> <div class="row la-wrapper"> <div class="col-10 offset-1 col-sm-8 offset-sm-2 col-md-10 offset-md-1 px-0"> <div class="form-group"> <label for="customRange2">Make your choice</label> <input type="range" class="custom-range" min="1" max="4" id="customRange2" value="1"> </div> <div class="la"> <div><span> option 1 </span></div> <div><span> option #2 </span></div> <div><span> option ##3 </span></div> <div><span> option with text </span></div> </div> </div> </div> </div> Range 元素现在原生支持此功能。以下示例主要来自 Mozilla 文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range datalist { display: flex; flex-direction: column; justify-content: space-between; writing-mode: vertical-lr; width: 200px; } option { padding: 0; } input[type="range"] { width: 200px; margin: 0; } <label for="custom-range">Make your choice</label><br /> <input type="range" min="1" max="4" id="custom-range" list="values" /> <datalist id="values"> <option value="1" label=" option 1"></option> <option value="2" label="option #2"></option> <option value="3" label="option ##3"></option> <option value="4" label="option with text"></option> </datalist>
如何修复 Django Web 应用程序为管理站点显示错误的 CSS 布局
我正在开发一个 Django Web 应用程序。如果我尝试访问管理站点，则会出现一个用于选择主题颜色的新按钮。该按钮无法正确显示。这里有一个截图： 我没有添加任何...
Bootstrap-4 显示实用程序不会在较小的屏幕尺寸上隐藏元素
像在小/超小屏幕上隐藏元素这样的小事是行不通的。是否与 Bootstrap 4.6.1 弃用的某些内容的浏览器兼容性有关？ ...
我正在尝试为标题创建自定义 svg 下划线。结果应该是这样的： 到目前为止我的代码如下所示： 超文本标记语言 我正在尝试为标题创建自定义 svg 下划线。结果应该是这样的： 到目前为止，我的代码如下所示： HTML <div class="container"> <div class="row"> <h1 class="ml-4 underline-text">News feed</h1> </div> </div> CSS .underline-text { position: relative; display: inline-block; padding-bottom: 10px; &::before { content: ""; background-image: url("./../../dist/img/underline.svg"); background-repeat: no-repeat; position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; z-index: -1; } } 结果如下： 如何在不改变下划线位置的情况下移动文本？目前，它粘在 Bootstrap 网格的最左边，对我来说没问题。但是，我想将文本向右移动一点。我尝试使用ml-4，但根本不起作用。同时，mx-4 会移动文本和下划线。如果我在 CSS 部分设置 margin-left，也会发生同样的情况。 非常感谢任何建议。 不要使用 margin，而是使用 padding，因为这不会影响伪元素的位置。 .underline-text { padding-left: 2rem !important; }
我在使用 bootstrap 5 时遇到了多级菜单的问题，这里我创建了一个多级菜单，但是当我运行它时，菜单不会出现在侧面，而是直接出现在上一个菜单的下面...
尝试在电子中显示Bootstrap Modal。 我已经安装了 jquery 和 bootstrap 模块。 然后在.js文件中编写以下代码。 const $ = require('jquery'); 需要（'引导'）； $（文档）....
这是我的JS： 函数handleSelectionChange(selectElement, nextField) { nextField.focus(); } 函数handleKeyPress（事件，</desc> <question vote="0"> <p>这是我的JS：</p> <pre><code><script type="text/javascript"> function handleSelectionChange(selectElement, nextField) { nextField.focus(); } function handleKeyPress(event, currentField, nextField) { if (event.key === "Enter") { event.preventDefault(); nextField.focus(); } } </script> </code></pre> <p>这是我的表格：</p> <pre><code><form action="incoming.php" method="post" > <input type="hidden" name="pt" value="<?php echo $_GET['id']; ?>" /> <input type="hidden" name="invoice" value="<?php echo $_GET['invoice']; ?>" /> <select name="product" onchange="handleSelectionChange(this, qty)" style="width:300px; "class="chzn-select" required autofocus> <option></option> <?php try { include('../connect.php'); $result = $db->prepare("SELECT * FROM products"); $result->execute(); // Rest of your code to generate dropdown options } catch (PDOException $e) { echo "Database Error: " . $e->getMessage(); } for($i=0; $row = $result->fetch(); $i++){ ?> <option value="<?php echo $row['product_id'];?>"><?php echo $row['product_code']; ?> - <?php echo $row['gen_name']; ?> - <?php echo $row['product_name']; ?> | Expires at: <?php echo $row['expiry_date']; ?></option> <?php } ?> </select> <input type="number" onkeydown="handleKeyPress(event, this, price1)" name="qty" value="" min="1" placeholder="Qty" autocomplete="off" style="width: 300px; height:30px; padding-top:6px; padding-bottom: 4px; margin-right: 4px; font-size:15px;" / required> <input type="hidden" name="discount" value="" autocomplete="off" style="width: 68px; height:30px; padding-top:6px; padding-bottom: 4px; margin-right: 4px; font-size:15px;" /> <input type="number" onkeydown="handleKeyPress(event, this, button)" name="price1" value="" autocomplete="off" placeholder="Price" style="width: 300px; height:30px; padding-top:6px; padding-bottom: 4px; margin-right: 4px; font-size:15px;" / required> <input type="hidden" name="date" value="<?php echo date("m/d/y"); ?>" /> <Button type="submit" name="button" class="btn btn-info" style="width: 123px; height:35px; margin-top:-5px;" /><i class="icon-plus-sign icon-large"></i> Add</button> </form> </code></pre> <p>问题是我想在页面加载时自动聚焦于选择元素。但这里自动对焦不起作用。我实验过，当我从选择标签中删除“class =“chzn-select”时，自动对焦可以工作，但当我添加它时，它停止工作。请帮助我。</p> </question> <answer tick="false" vote="0"> <p>试试这个 首先将 id 添加到产品选择中，然后添加</p> <pre><code>document.getElementById("product").focus() </code></pre> <p>在脚本部分的顶部。 请注意，我删除了 php 代码，您可以在代码中添加 php 代码。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>document.getElementById("product").focus() function handleSelectionChange(selectElement, nextField) { nextField.focus(); } function handleKeyPress(event, currentField, nextField) { if (event.key === "Enter") { event.preventDefault(); nextField.focus(); } }</code></pre> <pre><code><form action="incoming.php" method="post" > <input type="hidden" name="pt" value="" /> <input type="hidden" name="invoice" value="" /> <select name="product" id="product" onchange="handleSelectionChange(this, qty)" style="width:300px; "class="chzn-select" required> <option>Prod1</option> <option>Prod2</option> </select> <input type="number" onkeydown="handleKeyPress(event, this, price1)" name="qty" value="" min="1" placeholder="Qty" autocomplete="off" style="width: 300px; height:30px; padding-top:6px; padding-bottom: 4px; margin-right: 4px; font-size:15px;" required /> <input type="hidden" name="discount" value="" autocomplete="off" style="width: 68px; height:30px; padding-top:6px; padding-bottom: 4px; margin-right: 4px; font-size:15px;" /> <input type="number" onkeydown="handleKeyPress(event, this, button)" name="price1" value="" autocomplete="off" placeholder="Price" style="width: 300px; height:30px; padding-top:6px; padding-bottom: 4px; margin-right: 4px; font-size:15px;" required /> <input type="hidden" name="date" value="" /> <Button type="submit" name="button" class="btn btn-info" style="width: 123px; height:35px; margin-top:-5px;" /><i class="icon-plus-sign icon-large"></i> Add</button> </form></code></pre> </div> </div> <p></p> </answer> </body></html>
saya ingin membuat 按钮组 untuk skala perbandingan metode AHP
我有 2 个 div 元素，正在固定大小的模式对话框中显示。 我有 2 个div 元素显示在固定大小的模式对话框中。 <div class="row pr-2 pl-2"> <div class="col-12 pb-2" style="background-color: red"> <img src="@string.Format("data:image/png;base64,{0}", imageSrc1)" class="img-fluid" /> </div> <div class="col-12" style="background-color: blue"> <img src="@string.Format("data:image/png;base64,{0}", imageSrc2)" class="img-fluid" /> </div> </div> 如何扩展元素，使其占据 100% 的宽度和 50% 的高度？ 要扩展两个 <div> 元素，使其占据模式对话框中 100% 的宽度和 50% 的高度，您可以使用 flexbox。以下是修改代码以实现所需布局的方法： <style> /* Add this CSS to your existing stylesheet or in a <style> tag in the <head> of your HTML */ .modal { display: flex; flex-direction: column; width: 100%; height: 50%; } .row { flex: 1; } .col-12 { width: 100%; } /* You can keep your existing styling for the images */ .img-fluid { max-width: 100%; height: auto; } </style> <div class="modal"> <div class="row pr-2 pl-2"> <div class="col-12 pb-2" style="background-color: red"> <img src="@string.Format("data:image/png;base64,{0}", imageSrc1)" class="img-fluid" /> </div> </div> <div class="row pr-2 pl-2"> <div class="col-12" style="background-color: blue"> <img src="@string.Format("data:image/png;base64,{0}", imageSrc2)" class="img-fluid" /> </div> </div> </div> 以下是这段代码的作用： .modal 类设置模式以使用 Flexbox 并将其子项排列在列布局中。它还将宽度设置为可用空间的 100%，将高度设置为 50%。 .row类确保模式内的每一行占用相同数量的可用垂直空间。 .col-12类将每列的宽度设置为100%，确保每个图像占据其容器的整个宽度。 通过使用这些 CSS 规则和结构，两个元素将扩展为模态框的 100% 宽度和 50% 高度，一个排列在另一个元素下面。您可以根据需要调整样式和间距，以在模式对话框中实现您想要的确切外观。
我有一个 Bootstrap list-group-flush 来显示左侧垂直导航。 我想让左上角变圆。 class="rounded-top" 有效，但是 class="rounded-top-left" 或 class="rounded top-left"...