bootstrap-4 相关问题

Bootstrap 4是流行的前端组件库的第四个主要版本。 Bootstrap框架有助于创建响应迅速,移动优先的网站和Web应用程序。

Bootstrap 4 Beta 使用 Webpack 3.x 导入 Popper.js 会抛出 Popper 不是构造函数

Bootstrap 4 Beta 已经发布了……耶!然而,Tether 被 Popper.js 替换为工具提示(和其他功能),但我看到控制台中抛出了一个新错误,建议我对 P 进行更改...

回答 5 投票 0

轮播项目未显示在移动视图上

我正在使用 boostrap Carousel,我在笔记本电脑视图中的图像上放置了一些项目,它看起来很完美,但在移动视图上项目没有显示 这是笔记本电脑视图 这是移动视图 我正在使用 boostrap Carousel,我在笔记本电脑视图中的图像上放置了一些项目,它看起来很完美,但在移动视图上项目没有显示 这是笔记本电脑视图 这是手机视图 <section class="hero-wrap"> <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleCaptions" data-slide-to="1"></li> <li data-target="#carouselExampleCaptions" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="images/bg_1.jpg" class="d-block w-100" alt=""> <div class="carousel-caption d-none d-md-block"> <div class="overlay"></div> <div class="container"> <div class="row slider-text "> <div class="col-md-10 ftco-animate text-center"> <br><br> <div class="icon"> <span class="flaticon-lotus"></span> </div> <h1>Spa &amp; Beauty Center</h1> <div class="row justify-content-center"> <div class="col-md-7 mb-3"> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> </div> </div> <p> <a href="pricing.php" class="btn btn-primary p-3 px-5 py-4 mr-md-2">Prices</a> <a href="booking.php" class="btn btn-outline-primary p-3 px-5 py-4 ml-md-2">Booking</a> </p> </div> </div> </div> </div> </div> <div class="carousel-item"> <img src="images/bg_2.jpg" class="d-block w-100" alt=""> <div class="carousel-caption d-none d-md-block"> <div class="overlay"></div> <div class="container"> <div class="row slider-text"> <div class="col-md-10 ftco-animate text-center"> <div class="icon"> <span class="flaticon-lotus"></span> </div> <h1>Spa &amp; Beauty Center</h1> <div class="row justify-content-center"> <div class="col-md-7 mb-3"> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> </div> </div> <p> <a href="pricing.php" class="btn btn-primary p-3 px-5 py-4 mr-md-2">Prices</a> <a href="booking.php" class="btn btn-outline-primary p-3 px-5 py-4 ml-md-2">Booking</a> </p> </div> </div> </div> </div> </div> <div class="carousel-item"> <img src="images/bg_3.jpg" class="d-block w-100" alt=""> <div class="carousel-caption d-none d-md-block"> <div class="overlay"></div> <div class="container"> <div class="row slider-text"> <div class="col-md-10 ftco-animate text-center"> <div class="icon"> <span class="flaticon-lotus"></span> </div> <h1>Spa &amp; Beauty Center</h1> <div class="row justify-content-center"> <div class="col-md-7 mb-3"> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> </div> </div> <p> <a href="pricing.php" class="btn btn-primary p-3 px-5 py-4 mr-md-2">Prices</a> <a href="booking.php" class="btn btn-outline-primary p-3 px-5 py-4 ml-md-2">Booking</a> </p> </div> </div> </div> </div> </div> </div> </div> </section> And css code is .carousel-item { height: 100vh; min-height: 300px; background: no-repeat scroll center scroll; \--webkit-background-size: cover; background-size: cover; } .carousel-item::before { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #000; opacity: 0.1; } .carousel-caption{ bottom:75px; padding-left:200px; padding-right:50px; } @media (max-width: 600px) { .carousel-item { height: 0; min-height: 270px; } } 我正在使用 boostrap Carousel,我在笔记本电脑视图中的图像上放置了一些项目,它看起来很完美,但在移动视图上项目没有显示 这是笔记本电脑视图 这是手机视图 这是因为 Bootstrap 将 .d-none 类显示为 none(带有 !important)。如果您想覆盖 Bootstrap 并在小屏幕中显示它,请使用内联 css(在 HTML 中)。然后,您还需要为小屏幕添加相应的样式(减小按钮的大小..) .carousel-item { height: 100vh; min-height: 300px; background: no-repeat scroll center scroll; /* --webkit-background-size: cover; */ background-size: cover; } .carousel-item::before { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #000; opacity: 0.1; } .carousel-caption{ bottom:75px; padding-left:200px; padding-right:50px; } @media (max-width: 600px) { .carousel-item { height: 0; min-height: 270px; } } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <section class="hero-wrap"> <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleCaptions" data-slide-to="1"></li> <li data-target="#carouselExampleCaptions" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://picsum.photos" class="d-block w-100" alt=""> <div class="carousel-caption d-none d-md-block" style="display:block !important;"> <div class="overlay"></div> <div class="container"> <div class="row slider-text "> <div class="col-md-10 ftco-animate text-center"> <br><br> <div class="icon"> <span class="flaticon-lotus"></span> </div> <h1>Spa &amp; Beauty Center</h1> <div class="row justify-content-center"> <div class="col-md-7 mb-3"> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> </div> </div> <p> <a href="pricing.php" class="btn btn-primary p-3 px-5 py-4 mr-md-2">Prices</a> <a href="booking.php" class="btn btn-outline-primary p-3 px-5 py-4 ml-md-2">Booking</a> </p> </div> </div> </div> </div> </div> <div class="carousel-item"> <img src="https://picsum.photos/id/237/200/300" class="d-block w-100" alt=""> <div class="carousel-caption d-none d-md-block" style="display:block !important;"> <div class="overlay"></div> <div class="container"> <div class="row slider-text"> <div class="col-md-10 ftco-animate text-center"> <div class="icon"> <span class="flaticon-lotus"></span> </div> <h1>Spa &amp; Beauty Center</h1> <div class="row justify-content-center"> <div class="col-md-7 mb-3"> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> </div> </div> <p> <a href="pricing.php" class="btn btn-primary p-3 px-5 py-4 mr-md-2">Prices</a> <a href="booking.php" class="btn btn-outline-primary p-3 px-5 py-4 ml-md-2">Booking</a> </p> </div> </div> </div> </div> </div> <div class="carousel-item"> <img src="https://picsum.photos/seed/picsum/200/300" class="d-block w-100" alt=""> <div class="carousel-caption d-none d-md-block" style="display:block !important;"> <div class="overlay"></div> <div class="container"> <div class="row slider-text"> <div class="col-md-10 ftco-animate text-center"> <div class="icon"> <span class="flaticon-lotus"></span> </div> <h1>Spa &amp; Beauty Center</h1> <div class="row justify-content-center"> <div class="col-md-7 mb-3"> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> </div> </div> <p> <a href="pricing.php" class="btn btn-primary p-3 px-5 py-4 mr-md-2">Prices</a> <a href="booking.php" class="btn btn-outline-primary p-3 px-5 py-4 ml-md-2">Booking</a> </p> </div> </div> </div> </div> </div> </div> </div> </section> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

回答 1 投票 0

Bootstrap 手风琴在桌面上默认显示,在移动设备上默认隐藏

我对 Bootstrap 有点陌生,所以我不确定该怎么做。 我有一个简单的 Bootstrap 手风琴,就像这个片段中一样。它被分成多个手风琴,因为我希望它们能够......

回答 1 投票 0

Angular bootstrap 4 使用搜索过滤器进行选择

我有一个 Angular 项目,我正在使用 Bootstrap 4。 我有一个选择: 一个 两个 我有一个 Angular 项目,我正在使用 Bootstrap 4。 我有一个选择: <select> <option value="one">One</option> <option value="two">Two</option> <option value="three">Three</option> </select> 当选择打开时,我需要一些搜索过滤器或类似的过滤器。 我该怎么做? 您必须使用下拉选择器创建自定义输入。例如: <div> <input type="text" (keyup)="onSeachDropdownValue($event)"/> <div class="dropdown-selector"> <div class="dropdown-selector-option" *ngFor="let option of searchedOptions" (click)="onSelectDropdownValue(option)">{{option}}</div> </div> </div> 在你的打字稿中: options = ['option1', 'option2', 'option3']; searchedOptions = []; onSeachDropdownValue($event) { const value = $event.target.value; searchedOptions = options.filter(option => option.includes(value)); } onSelectDropdownValue(option) { // Do something with selected value } 您可以使用两种方式绑定,以您想要的方法(模板或反应方法)填充所选选项的输入。 希望有帮助 检查此解决方案,如果未显示下拉数据,则检查此解决方法。 这是我根据 Angular 16 和 Bootstrap 5 中提到的两个解决方案所做的。 安装NgMultiSelectDropDownModule并正确导入, 在.html中: <ng-multiselect-dropdown [placeholder]="'Employee privilege'" [settings]="dropdownSettings" [data]="dropdownList" [(ngModel)]="selectedItems" > </ng-multiselect-dropdown> 在.ts中: import { FormsModule} from '@angular/forms'; . . . dropdownList = [{}]; selectedItems = [{}]; dropdownSettings = {}; ngOnInit(): void { this.dropdownList = [ { id: 1, text: 'Barbecue' }, { id: 2, text: 'Mustard' }, { id: 3, text: 'Ketchup' }, { id: 4, text: 'Mayonaise' } ]; this.selectedItems = [ { id: 1, text: 'Barbecue' }, { id: 2, text: 'Mustard' } ]; this.dropdownSettings = { idField: 'id', textField: 'text', selectAllText: 'Select All', unSelectAllText: 'UnSelect All', itemsShowLimit: 3, allowSearchFilter: true, limitSelection: 2 }; }

回答 0 投票 0

将 flex div 添加到英雄并在调整大小时反转位置

正如标题所说,我想要实现的目标(只有2个分辨率,最小/最大767px) 大于 767px,2 个 div 并排。一种是左侧有文字,一种是右侧有图像。 那个...

回答 1 投票 0

Bootstrap 4 导航栏下拉问题

我尝试将此导航栏下拉菜单分成两列,但它们相互冲突。 另一个问题是,在移动设备中搜索栏保持在底部。并且页面没有响应...

回答 1 投票 0

如何使用 html 和 css 实现此目的?

我正在为自己创建一个作品集网站,但我是网络开发的初学者。我想在页面底部创建一个部分,其中图片中的“启动项目”框将是我的

回答 1 投票 0

防止模态出现错误时关闭

我使用了一种通用方法,在添加食品时,将打开一个带有表单的模式,让用户添加他的详细信息。然而,为了检查后端是否有重复的项目,我只能

回答 2 投票 0

羽毛图标在 Bootstrap Modal 中不起作用

版本:[email protected],Bootstrap v4.3.1 使用 C# RazorPage、asp.net 我目前正在尝试构建一个 ASP.NET Web 应用程序。羽毛图标在普通页面上工作正常,但它不显示...

回答 1 投票 0

Angular:防止模态在出现错误时关闭

我使用了一种通用方法,在添加食品时,将打开一个带有表单的模式,让用户添加他的详细信息。然而,为了检查后端是否有重复的项目,我只能

回答 2 投票 0

隐藏在容器后面的下拉选项 - 寻求解决方案

如何让我的下拉选项出现在上面,而不是在其他元素后面? 如何让我的下拉选项出现在上方,而不是其他元素后面? <div class="col-lg-4 col-md-6 col-12" > <div class="single-schedule " style="height: 410px;"> <div class="inner"> <div class="single-content"> <select class="small-dropdown"> <option value="volvo">Neurology</option> <option value="saab">Ent</option> <option value="fiat">Phsycology</option> <option value="audi">Brain</option> </select> </div> </div> </div> </div> 这可以通过增加 css 类中的 Z-index 来解决 .small-dropdown { position: relative; z-index: 10; } 请注意,某些元素的 z 索引可能比菜单更高,因此您只需增加 z 索引即可 请参阅文档

回答 1 投票 0

如何在同一行显示多个引导卡

我正在尝试使用 bootstrap 4 在卡片中显示从数据库中检索到的数据,数据已正确检索,但问题在于这些卡片的显示,因为它刚刚显示在...

回答 2 投票 0

Gatsby - 引导错误:util.js:68 未捕获的类型错误:无法读取未定义的属性“fn”

我目前正在使用 Gatsby 框架在 React 中构建一个网站。下面的问题是这样的: util.js:68 未捕获类型错误:无法读取未定义的属性“fn” 在 util.js:68 在 util.js 处:...

回答 2 投票 0

响应式设计 - 在小屏幕上每行显示 2 张卡片

我正在开发一个网页,其中有一排卡片,每张卡片都包含一个图像和一个标题。目前,我正在使用 Bootstrap 网格系统在较大的屏幕上每行显示 4 张卡片 (col-md-2),...

回答 1 投票 0

引导程序中项目之间的空间

我正在使用 bootstrap 4,我有一个显示的项目列表,如下所示: 我正在使用 bootstrap 4 并且我有一个像这样显示的项目列表: <div class="container"> <div class="row"> <div class="card col-md-4 col-sm-6 col-12 item-wr" *ngFor="let item of items"> ... </div> </div> </div> 在我使用 Google Chrome 的桌面视图中,我可以按行看到 3 个项目,但问题是列之间没有空格。所以我添加了一个类item-wr .item-wr { margin: 10px; } 但这里也有换行符,我只看到 2 个项目,行右侧有一些空格。 那么我怎样才能让每行 3 件物品col-md-4保持空间? P.S 我希望每行的开头或结尾没有空格。每行的第一列不得有一些 margin-left 并且每行的最后一列不得有一些 margin-right 你必须在card内上课col-md-4 col-sm-4 col-12。因为col-md-4 col-sm-4 col-12这个类本身会填充并提供空间,所以你可以在列类中应用设计相关的类。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-4 col-12"> <div class="card item-wr"> ... </div> </div> <div class="col-md-4 col-sm-4 col-12"> <div class="card item-wr"> ... </div> </div> <div class="col-md-4 col-sm-4 col-12"> <div class="card item-wr"> ... </div> </div> </div> </div> 使用 Bootstrap 4 提供的填充实用程序类(如 pr-2)向右填充 2 个间距单位。参考这里 附注margin 会在盒子模型之外添加空间,因此您应该使用填充来防止换行。欲了解更多信息,请参阅此处

回答 2 投票 0

如何在 Bootstrap 4 中将卡片设置到 col-md 的中间[重复]

我想把这张卡放在中间而不是中心,该怎么做? 我已经尝试使用 my-auto 但根本不起作用。 请检查我的代码并进行一些更改。谢谢! 我的脚本: &l...

回答 1 投票 0

如何在Bootstrap Tooltip中添加标签表

我初始化对象如下 $('[data-toggle="tooltip"]').tooltip({ 容器:“身体”, html:正确, 标题:函数(){ 返回'text1 我按如下方式初始化对象 $('[data-toggle="tooltip"]').tooltip({ container: 'body', html: true, title: function () { return '<u>text1</u><table class="table"><tr><td>text2</td></tr></table>'; } }); 但我只看到text1。 是否可以在工具提示中插入表格? 我在 Github 上发现了一个 问题,指出 Bootstrap 的消毒剂导致了这个问题。 您需要做的是允许用于您的表的所有元素都在白名单中(也tbody,这不是由您的代码定义的,但似乎您需要它)。另请看一下这个question,它是为弹出窗口完成的。之后,您可以再次在 tooltip 选项中使用此自定义白名单。 我创建了一个运行的小提琴: var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList; myDefaultWhiteList.table = ['class']; myDefaultWhiteList.tbody = []; myDefaultWhiteList.tr = []; myDefaultWhiteList.td = []; $('[data-toggle="tooltip"]').tooltip({ container: 'body', html: true, whiteList: myDefaultWhiteList, title: function () { return '<u>text1</u><table class="table text-light"><tr><td>text2</td></tr></table>'; } }); <script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/> <button class="ml-5 mt-5 btn btn-primary" data-toggle="tooltip"> Test </button> 您可能会注意到,这是 Bootstrap 不建议的行为。我建议使用 Bootstrap 的弹出框来处理较大的内容,例如表格。 祝你好运! 我相信工具提示的内容已添加到您要应用工具提示的元素的标题属性中。要分解它,本质上你想做的是...... <div data-toggle="tooltip" title="<u>text1</u><table class="table"><tr><td>text2</td></tr></table>"> Foo </div> $('[data-toggle="tooltip"]').tooltip(); 如果您想在表格中包含信息作为工具提示,我认为您必须创建一个包含表格的元素,将其正确放置在您想要悬停的元素附近,并使用 $.hover 来显示和隐藏元素。类似的东西 $('#hoverTest').hover(function(){ $('#customTooltip').removeClass('hideme'); }, function(){ $('#customTooltip').addClass('hideme'); }); table, th, td { border: 1px solid black; } .hideme{ display:none } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="hoverTest">Hover here</div> <div id="customTooltip" class="hideme"> <table> <th>Col1</th> <th>Col2</th> <tr> <td>Cell1</td> <td>Cell2</td> </tr> </table> </div> jquery 最简单的技巧。 http://jsfiddle.net/b80tn4hx/3/ $('a').hover(function(ev){ $('.tablediv').stop(true,true).fadeIn(); },function(ev){ $('.tablediv').stop(true,true).fadeOut(); }).mousemove(function(ev){ $('.tablediv').css({left:ev.layerX+10,top:ev.layerY+10}); }); .container{ padding: 15px; } .tablediv{ display:none; position:absolute; background: #999; padding: 5px; border: 1px solid red; } td{ border:1px solid #777; padding: 5px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <a href="#">test</a> <div class="tablediv"> <table> <tr><td>asdf</td><td>gsdi</td></tr> <tr><td>asdf</td><td>gsdi</td></tr> </table> </div> </div> 看起来 whiteList 现在是一个 allowList 并且不再那么“隐藏”。 工具提示标题中有使用 table、tbody、td 等所需的 javascript 代码示例。 https://getbootstrap.com/docs/5.2/getting-started/javascript/#sanitizer 我希望这有帮助。

回答 4 投票 0

如何在引导的 React/Redux 应用程序中覆盖 Bootstrap 主题颜色?

可能是新手问题(从 REACT 开始),但我无法在新引导的 React 应用程序中更改主题颜色。 我读了一些答案,但不幸的是,它们不起作用......

回答 3 投票 0

仅在较小的屏幕上将 wordpress bootstrap4 navwalker 标题菜单分成两行

此 WordPress 网站使用 Bootstrap 4 和 Navwalker 版本。 我的客户只通过 iPhone 查看她的网站,她不希望菜单折叠。所以,为了让她看到整个菜单……

回答 1 投票 0

固定位置时,样式卡会超出我的顶部导航栏的顶部

我只是在学习,所以不要轻视我的 HTML 和 CSS :) 我正在为我的顶部导航栏苦苦挣扎。它不断被我的造型卡超越。它位于顶部并迫使我的顶部导航栏位于下方。我是...

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.