bootstrap-4 相关问题

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

所以我使用 Bootstrap 4 制作了一个非常简单的响应式网站布局，因此根据代码，当进入平板电脑模式时，即当视口宽度为 768px 时，列数应变为 4...

html css twitter-bootstrap bootstrap-4

回答 4 投票 0

我有以下html 我有以下html <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-2 col-sm col-sm-offset-0 col-xs-1"> <img src = "/static/assets/howitworks3.png" /> <p>Test</p> </div> <div class="col-md-4 col-md-offset-2 col-sm col-sm-offset-0 0 col-xs-1"> <img src = "/static/assets/howitworks3.png" /> <p>Test</p> </div> <div class="col-md-4 col-sm col-xs-1"> <img src = "/static/assets/howitworks3.png" /> <p>Test</p> </div> </div> </div> 我试图在桌面上显示三列，在移动设备上显示一列。我怎样才能做到这一点？ div 必须具有响应能力。谢谢！我正在使用 bootstrap、html 和 CSS。一种方法是使用媒体查询。如果特定条件为真，媒体查询用于应用一些 CSS 属性。将 id （或唯一的类）添加到所有三个 col div 并将视口添加到 html 文件的 <head>，如下所示： <head> <meta name='viewport' content='width=device-width,initial-scale=1'/>  </head> 并将此 css 属性添加到您的样式中： @media (max-width: 599px) {#col1, #col2 { display: none; }}

html css twitter-bootstrap bootstrap-4

回答 1 投票 0

将文本框排成一行的句子格式

我的页面上有以下 Bootstrap 行：我的页面上有以下 Bootstrap 行： <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <div class="form-group row"> <div class="col-sm-6"> I, <input type="text" asp-for="FullName" class="form-control input-lg" />, </div> <div class="col-sm-6"> hereby acknowledge that I understand my responsibility as an: </div> </div> 每当我运行代码时，我都会看到文本框变得低于“I，”。我尝试限制文本框的大小，并尝试将“I,”放在另一列中，但文本框变得与“I,”相距很远。这是我尝试过的代码： <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <div class="form-group row"> <div class="col-sm-2"> I, </div> <div class="col-sm-4"> <input type="text" size="10" asp-for="FullName" class="form-control input-lg" />, </div> <div class="col-sm-6"> hereby acknowledge that I understand my responsibility as an: </div> </div> 我只想将“我，方框”和“特此承认我理解我的责任”写在一行上。 <input> 已经是一个内联元素。为什么不简单地将它们全部放在同一列中而不将句子分成奇怪的列？您不需要针对全角元素的特殊类。 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <div class="form-group row"> <div class="col-sm-2"> I, </div> <div class="col-sm-4"> <input type="text" size="10" asp-for="FullName" class="form-control input-lg" />, </div> <div class="col-sm-6"> hereby acknowledge that I understand my responsibility as an: </div> <div> I, <input type="text" size="10" asp-for="FullName" class="form-control input-lg" />, hereby acknowledge that I understand my responsibility as an: </div> </div>

html css bootstrap-4

回答 1 投票 0

如何为所需控件添加验证消息

我有一个 ASP.NET Core MVC 表单，其中需要的控件很少。我在 th 元素中添加了必需的属性。如果控件没有数据，则不会进入下一页，但我无法添加

html .net-core bootstrap-4 asp.net-core-mvc

回答 1 投票 0

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

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

javascript twitter-bootstrap webpack aurelia bootstrap-4

回答 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 & 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 & 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 & 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 & 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 & 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 & 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>

html css bootstrap-4 carousel

回答 1 投票 0

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

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

javascript html css bootstrap-4

回答 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 }; }

angular twitter-bootstrap bootstrap-4

回答 0 投票 0

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

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

html css bootstrap-4

回答 1 投票 0

Bootstrap 4 导航栏下拉问题

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

html css twitter-bootstrap bootstrap-4

回答 1 投票 0

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

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

javascript html css user-interface bootstrap-4

回答 1 投票 0

防止模态出现错误时关闭

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

javascript .net angular typescript bootstrap-4

回答 2 投票 0

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

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

bootstrap-4 icons feathericons

回答 1 投票 0

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

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

javascript .net angular typescript bootstrap-4

回答 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 索引即可请参阅文档

html css bootstrap-4

回答 1 投票 0

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

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

django bootstrap-4

回答 2 投票 0

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

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

jquery reactjs bootstrap-4 gatsby react-helmet

回答 2 投票 0

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

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

html css twitter-bootstrap bootstrap-4 bootstrap-5

回答 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 会在盒子模型之外添加空间，因此您应该使用填充来防止换行。欲了解更多信息，请参阅此处

html css twitter-bootstrap angular bootstrap-4

回答 2 投票 0

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

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

html css twitter-bootstrap bootstrap-4

回答 1 投票 0

bootstrap-4 相关问题

最新问题