bootstrap-4 相关问题

如何更改 Bootstrap Table Paginator 的位置？

我正在使用 Bootstrap Table 源 CSS。我想将文本和页面大小如下所示从表格底部移动到顶部。这是一个例子。 显示 159 行 [20] 行中的 1 到 20...

如何在onclick后使其成为一行

我的html中有一个div： .row(id="div_amount") .col-sm-2 标签（for =“金额”）金额： .col-sm-1 输入（类型=“文本”，名称=“金额”） 正如我所期望的那样，这是完美的。一栏显示...

奇怪的蓝色轮廓/边框搜索按钮iOS

我有一个奇怪的蓝色边框，似乎只出现在 iOS 上。 在此输入图像描述 我想我已经尝试了所有可能的 :focus :active 变化，但我就是找不到它，我什至找不到

我的项目 laravel 当我单击表单中的提交并输入错误时，我的视图刷新多次，因此我看不到消息错误

这个问题在chrome中存在，在opera中不存在 这是我的视图代码，我尝试使用 validate 和 div 来执行表单，并包含错误类型： @if(计数($错误) > 0) 这个问题在chrome中存在，在opera中不存在 这是我的视图代码，我尝试使用 validate 和 div 来执行带有错误类型的表单： @if(count($errors) > 0) <div class="alert alert-danger"> <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div> @endif <form action="add" method="POST"> {{ csrf_field() }} <!--Securite--> Product name <input type="text" value="{{ Request::old('name') }}" class="form-control {{ $errors->has('name') ? 'is-invalid' : ''}}" name="name" placeholder="enter product"> <br> Product Price <input type="text" class="form-control {{ $errors->has('price') ? 'is-invalid' : '' }}" value="{{ Request::old('price') }}" name="price" placeholder="enter price"> <br> <input type="submit" value="Add Product"> </form> @endsection 试试这个。 这将是您控制器中的一个功能。 public function store(Request $request) { $validator = Validator::make($request->all(), [ 'name' => 'required', 'price' => 'required' ]); if ($validator->fails()) { return redirect('your-view-name') ->withErrors($validator) ->withInput(); } } 使用 foreach 查看错误 @if ($errors->any()) <div class="alert alert-danger"> <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div> @endif 您的表格 <form action="{{url('/route-name')}}" method="POST"> @csrf Product name <input type="text" value="{{ Request::old('name') }}" class="form-control {{ $errors->has('name') ? 'is-invalid' : ''}}" name="name" placeholder="enter product"> <br> Product Price <input type="text" class="form-control {{ $errors->has('price') ? 'is-invalid' : '' }}" value="{{ Request::old('price') }}" name="price" placeholder="enter price"> <br> <input type="submit" value="Add Product"> </form> @if (count($errors)) @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach @endif

Bootstrap Validator 验证数字范围

如何设置两个数字范围的验证。我想将第一个数字的最大值设置为第二个数字的值，将第二个数字的最小值设置为第一个数字的值。这是我的 js c...

停止 Bootstrap 旋转器，使其静态而不旋转

我正在使用 bootstrap 4。当事件开始时，我可以使用以下命令让旋转器旋转：

如何在jquery中使文本读得更多/更少？

我不知道也许jquery不起作用。错误在哪里？我想让点击时少读多输入文本。当我点击“阅读更多”时，没有任何反应。如何修复它？ $('.moreless-button').click(

如何应用：聚焦多个相同的选择器？

我试图在输入类型数字聚焦时更改底部边框颜色。我部分成功了，但 css 并未应用于所有选择器。问题是这样的： 左侧（比索）不适合...

引导网格宽度不正确

我是 Boostrap 的新手，我处于一个无法离开的地方......我尝试了很多东西，检查 Boostrap 文档等，但我需要帮助。 我有以下代码： 我是 Boostrap 的新手，我处于一个无法离开的地方...我尝试了很多东西，检查 Boostrap 文档等，但我需要帮助。 我有以下代码： <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <style> #wrapper {background: yellow; max-width: 500px; margin: 0 auto; } .info {background: blue;} #side {background: red} #data {background: orange;} </style> <div id="wrapper"> <div class="row"> <div class="col-12"> <p id="breadcrumbs"> Breadcrumbs </p> <h1>...</h1> <p class="info"> Info<br>info<br> </p> <div class="row"> <section id="side" class="col-md-4 col-lg-3"> ... </section> <section class="col-md-8 col-lg-9"> <div class="row"> <div class="col-4"> ... </div> <div class="col-8"> ... </div> <ul id="data" class="row gx-5"> <li class="col-4">...</li> <li class="col-4">...</li> <li class="col-4">...</li> <li class="col-4">...</li> </ul> </div> </section> </div> </div> </div> </div> 问题是 #breadcrumbs、h1、.info 具有任意宽度（其包装器的最大宽度，假设为 1600px），但 .row 更大。它的左/右边界为负，取自 _grid.scss:6。 当我将背景颜色设置为#side 元素时，它在视觉上位于网格之外。 知道我做错了什么吗？ 谢谢。 我尝试查看 Bootstrap 手册，更改 bootstrap 类名称等。 我预计嵌套 .row 的宽度将是其父级的 100%。 我附上图像/屏幕截图，它看起来如何。顶部是可见的 p.info（其边界），底部是红色背景的 .row，它超出了 .info 及其父级。 JSFiddle 链接：https://jsfiddle.net/e3fxnthp/ 使用下面的代码。为 .container 元素包装了 .row 类 (docs) 并重新排列了一些元素。 容器是 Bootstrap 中最基本的布局元素，在使用我们的默认网格系统时是必需的。 #wrapper {background: yellow; max-width: 500px; margin: 0 auto; } .info {background: blue;} #side {background: red} #data {background: orange;} <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <div id="wrapper"> <div class="row"> <div class="col-12"> <p id="breadcrumbs"> Breadcrumbs </p> <h1>...</h1> <p class="info"> Info<br>info<br> </p> <div class="container"> <div class="row"> <section id="side" class="col-md-4 col-lg-3"> ... </section> <section class="col-md-8 col-lg-9"> <div class="row"> <div class="col-4"> col 4 </div> <div class="col-8"> col 8 </div> </div> <ul id="data" class="row"> <li class="col-4">...</li> <li class="col-4">...</li> <li class="col-4">...</li> <li class="col-4">...</li> </ul> </section> </div> </div> </div> </div> </div>

Codeigniter 4 分页正常工作，但是，我的 Bootstrap 4 分页模板不起作用

我正在使用 CI4。我已经成功实现了分页。我有 9 个帖子，并使用“3”进行分页，因此有 3 页。一切都很好，但 CSS 很糟糕。这是一张...

Bootstrap4：自动完成预先输入搜索，使用ajax调用故障排除

我正在尝试使用文本输入作为搜索框，使用 bootstrap typeahead 插件通过 ajax 调用检索搜索结果 我正在尝试使用文本输入作为搜索框，使用 bootstrap typeahead 插件通过 ajax 调用检索搜索结果 <form class="form-inline ml-3" action="/phone-autocomplete/"> <div class="input-group input-group-sm"> <input class="form-control form-control-navbar typeahead" data-provide="typeahead" autocomplete="off" id="phone-autocomplete" type="search" name="searchstring" placeholder="search phone" aria-label="Search"> <div class="input-group-append"> <button class="btn btn-navbar" type="submit"> <i class="fas fa-search"></i> </button> </div> </div> </form> 我的数据源返回如下文本/xml 响应： [ "9876124", "9812124","9875124",] 我的javascript，包含所有必需的包后，如下： $('#phone-autocomplete').typeahead({ source: function (query, process) { return $.get('/phone-autocomplete/', { searchstring: query }, function (data) { console.log(data); return process(data); }); }, 'updater' : function(item) { this.$element[0].value = item; console.log(item); this.$element[0].form.submit(); return item; } }); </script> 目的是让搜索输入在用户每次键入字符时发送请求，并返回更新的项目列表 我遇到的问题是它只适用于一位数字，然后由于某种原因停止显示 这是使用 bootstrap3-typeahead.min.js 包 谢谢 您的 Ajax 调用一定有问题，因为 typeahead 似乎在搜索框中输入的每个字符都会更新，请参阅演示： // $('#phone-autocomplete').typeahead({ source: function(query, process) { data = ["9876124", "9812124", "9875124", ]; console.log(`Ajax call with query: ${query}`); return process(data); }, 'updater': function(item) { this.$element[0].value = item; console.log(item); this.$element[0].form.submit(); return item; } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script> <form class="form-inline ml-3" action="/phone-autocomplete/"> <div class="input-group input-group-sm"> <input class="form-control form-control-navbar typeahead" data-provide="typeahead" autocomplete="off" id="phone-autocomplete" type="search" name="searchstring" placeholder="search phone" aria-label="Search"> <div class="input-group-append"> <button class="btn btn-navbar" type="submit"> <i class="fas fa-search"></i> </button> </div> </div> </form>

bootstrap-select selectpicker无法在下拉菜单中选择

我找不到在下拉菜单中使用插件 bootstrap-select 的方法。 选择只是不显示。 我添加了这个 jQuery，不要通过单击来关闭下拉菜单： $(文档).on(...

为什么按钮隐藏在传单地图后面...如何将它们带到前面？

我已经编写了 html 代码，将一些响应式按钮放在传单地图上。这些按钮隐藏在地图后面并且不显示。如何带动他们前进？ 这是我想放的地图，但是...

增加引导下拉菜单宽度

想知道是否有人对如何增加下拉宽度有任何提示？ 我有一行包含两列，其中有一些 javascript，可以在选择时上下滑动下拉菜单。问题...

asp-append-version 影响 _Layout.cshtml 内的 html 元素

我正在尝试在 .net core mvc 应用程序中添加带有标志的语言选择器。选择器选择器工作正常，但 asp 版本附加到下拉列表的选项中。 我正在尝试在 .net core mvc 应用程序中添加带有标志的语言选择器。选择器选择器工作正常，但 asp 版本附加到下拉列表的选项中。 <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewData["Title"] - WebApplication2</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css"> <link rel="stylesheet" href="./css/site.css"> <link rel="stylesheet" href="./WebApplication2.styles.css" /> </head> <body> <div class="container"> <main role="main" class="pb-3"> @RenderBody() </main> <select class="selectpicker" data-width="fit"> <option data-content="<span class='flag-icon flag-icon-cz'></span>"></option> <option data-content="<span class='flag-icon flag-icon-de'></span>"></option> <option data-content="<span class='flag-icon flag-icon-gb'></span>"></option> </select> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="./js/site.js"></script> <script type='text/javascript'> $(function () { $('.selectpicker').selectpicker(); }); </script> @await RenderSectionAsync("Scripts", required: false) </body> 如果我将选择器移动到除 _Layout.cshtml 之外的任何其他文件中，它会按预期正常工作。知道如何解决这个问题吗？ 我们可以使用 @Html.Raw 来阻止 Razor engine 渲染这些内容。从而满足我们的需求。 使用以下代码 <select class="selectpicker" data-width="fit"> <option data-content="@Html.Raw("<span class='flag-icon flag-icon-cz'></span>")"></option> <option data-content="@Html.Raw("<span class='flag-icon flag-icon-de'></span>")"></option> <option data-content="@Html.Raw("<span class='flag-icon flag-icon-gb'></span>")"></option> </select> 测试结果

引导导航栏向下切换不显示链接

我对引导程序相当陌生，我似乎无法弄清楚为什么当调整大小到手机屏幕的大小时，出现的下拉开关不起作用。 这是我的导航栏代码： 我对引导程序相当陌生，我似乎无法弄清楚为什么当调整大小到手机屏幕的大小时，出现的下拉开关没有任何作用。 这是我的导航栏代码： <!DOCTYPE HTML> <html lang="en"> <head> <!--Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, name=viewport"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <link rel="stylesheet" href="/static/style.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"> <script type="text/javascript" src="/static/javascript.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <style> ul#menu li { display: inline; } </style> {% if title %} <title>{{ title }}</title> {% else %} <title>Finance Tracker</title> {% endif %} </head> <body> <nav class="navbar navbar-expand-sm navbar-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href='#'>Navbar</a> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"><a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a></li> <li class="nav-item"><a class="nav-link" href="/allexpenses">All Expenses</a></li> <li class="nav-item"><a class="nav-link" href="/allincomes">All Incomes</a></li> <li class="nav-item"><a class="nav-link" href="/expenses">Add Expenses</a></li> <li class="nav-item"><a class="nav-link" href="/incomes">Add Incomes</a></li> <li class="nav-item"><a class="nav-link" href="/goal">Add Goal</a></li> </ul> </div> </nav> <div class="container-fluid"> {% with messages = get_flashed_messages() %} {% if messages %} {% for message in messages %} <div class="alert alert-success"> {{ message }} </div> {% endfor %} {% endif %} {% endwith %} {% block content %}{% endblock %} </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> </body> </html> 我也在使用flask，这是base.html 模板，尽管我不认为这会影响引导程序。 任何帮助将不胜感激！ 尝试更改 3 个最终脚本，根据 bootstrap 4 文档，使用这些： <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

使用 Ajax 和分页动态重新加载数据

我正在尝试从 API 获取有关动物及其速度的信息。 该信息应保存在 5 列的表格中。它应该看起来像这样： 你会发现代码...

如何修复未捕获错误：语法错误，无法识别的表达式：#3，位于 Function.Sizzle.error (jquery-3.6.0.js:1681)

我使用的是 jQuery 版本 3.6.0，但是在单选按钮之间切换时，控制台中出现错误，如屏幕截图所示。 任何有关修复的建议将不胜感激。

如何让div跟随产品主框

<div class="product-box"> <div class="product"> <div class="img-product"> <a href=""> <img style="width: 100%;" src="homepagepicture/shoes1.webp" alt=""> </a> <figure style="background: #e12c43; color: #ffffff;" class="label-sale"> <span>-20%</span> </figure> <ul class="product-icon"> <li class="add-cart mr-0"> <a href=""> <i class="fa-solid fa-bag-shopping icon-1"></i> </a> </li> <li class="view-product mr-0"> <a href=""> <i class="fa-solid fa-magnifying-glass icon-2"></i> </a> </li> <li class="add-favorite mr-0"> <a href=""> <i class="fa-regular fa-heart icon-3"></i> </a> </li> </ul> </div> <h4 class="product-title"> <a href="">Aero Wave 19</a> </h4> <p class="product-price"> <s class="">$156.00</s> <span class="">$124.95</span> </p> </div> .product-row { margin: 0px 0px 0px 0px; } .product-box { display: flex; flex-direction: column; width: 300px; padding: 15px; margin: 0px 26px; position: relative; overflow: hidden; } .p-img-container { width: 100%; height: 100%; display: flex; overflow: hidden; } .p-img a, .p-img { width: 100%; height: 100%; display: flex; } .p-img a img{ width: 100%; height: 100%; object-position: center; object-fit: contain; } .label-sale { position: absolute; top: 10px; right: -30px; font-size: 12px; font-weight: 500; letter-spacing: 1px; padding: 5px 12px; transform: rotate(45deg); width: 110px; } .product-box .product-icon { position: absolute; display: flex; flex-direction: row; justify-content: center; align-items: center; list-style: none; top: 220px; left: 5px; visibility: hidden; opacity: 0; transform: translateY(40%); transition: opacity 0.5s, transform 0.5s; } .product-box:hover .product-icon { visibility: visible; opacity: 1; transform: translateY(0); } .product-box:hover .product-icon, .product-box:not(:hover) .product-icon { transition-delay: 0.1s; } .product-icon li a { padding-left: 50px; width: 46px; height: 46px; box-shadow: 0 15px 25px #00000014; border-radius: 50%; margin-left: 10px; margin-right: 10px; display: block; margin-bottom: 13px; transition: .3s; color: #000; background: #fff; } .product-icon li a:hover { color: white; background: #51adcd; } .product-icon .icon-1{ position: absolute; top: 16px; left: 68px; } .product-icon .icon-2{ position: absolute; top: 16px; left: 138px; } .product-icon .icon-3{ position: absolute; top: 16px; left: 208px; } .product-title a { color: black; font-size: 16px; font-weight: inherit; text-decoration: none; } .product-title a:hover { color: #51adcd; } .product-price s { color: gray; font-weight: 700; font-size: 15px; } .product-price span { color: #51adcd; font-weight: 700; font-size: 15px; } 我希望产品图标在响应时随产品框一起移动，但事实并非如此。我已经尝试使产品盒位置相对，但它没有随之移动，但我的标签销售正在移动，但不是图片图标，这里是我需要修复的一些图像 我无法透露更多细节：3129iu32jdioasjdioasdasdasjdasioujdasiudjasiudjuaisjdiuasdiuasdiuasdas 删除填充添加添加下面的样式 .product-icon li a { /* remove commented padding */ /* padding-left: 50px; */ width: 46px; height: 46px; box-shadow: 0 15px 25px #00000014; border-radius: 50%; margin-left: 10px; margin-right: 10px; display: block; margin-bottom: 13px; transition: .3s; color: #000; background: #fff; /* Add these styles */ text-align:center;line-height:46px;} 删除以下图标样式 .product-icon .icon-1{ position: absolute; top: 16px; left: 68px;} .product-icon .icon-2{ position: absolute; top: 16px; left: 138px;} .product-icon .icon-3{ position: absolute; top: 16px; left: 208px;} 这是你想要的吗？

第二个选择日期未出现在选择列表中

我有这个模板：https://colorlib.com/wp/template/colorlib-wizard-15/ 我需要添加其他包含第二个日期的 div，但是当我复制 div 的日期和月份时，第二个是 yaers d...