Bootstrap 4是流行的前端组件库的第四个主要版本。 Bootstrap框架有助于创建响应迅速，移动优先的网站和Web应用程序。
我在同一容器内的 div 中有 1 个图像，在 div 中有 1 个标题文本。 虽然它在屏幕尺寸 >= 576 下工作正常。正如我所希望的，这是 图片和文字在同一行，比例一致...
我有下面所示的代码[我正在使用 JQuery 和 Bootstrap 4]： $('.dropdown-menu li').on('点击', function() { var getValue = $(this).text(); $('.dropdown-select').text(getValue); }); &l...
我正在尝试从四开文档复制一个简单的示例 它应该在悬停时给我“条纹”，但没有发生...... 我的代码： --- 标题：《无题》 格式：...
我正在尝试从四开文档复制一个简单的示例 它应该在悬停时给我“条纹”，但没有发生...... 我的代码： --- 标题：《无题》 格式：...
Bootstrap 4 无法更改导航栏菜单中的字体颜色[重复]
尝试了一切，由于某种原因我无法更改导航栏菜单中的字体颜色。无论我做什么它都保持黑色。 尝试了一切，但由于某种原因，我无法更改导航栏菜单中的字体颜色。无论我做什么它都保持黑色。 <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a href="index.html"><img src="images/finfab-logo.jpg" alt="Company logo"></a> <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> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item active"> <a class="nav-link" href="about.html">About<span class="sr-only">(current)</span></a> </li> </ul> </div> </nav> 这就是现在的风格，但也尝试了一些其他选择。在这个阶段我没有想法。 .jumbotron{ background-color: #003300; } .nav-item{ font-size: 25px; color:#003300; } 您是否尝试过在更改字体的 css 样式上添加 !important 命令？在这种情况下，您需要它来覆盖引导程序的样式。 所以它会是： color: #003300 !important;
我想将一些内容放入 Bootstrap 4 卡中，并在其上添加拉伸链接。我还想在此卡中包含一个按钮，该按钮的 URL 与拉伸的链接不同。 引导程序的
我正在尝试制作一个横向导航栏，但无法将引导程序中的 svg 图标居中，但是不能，我尝试了多种方法并检查了其他问题，但根本无法使其工作。任何想法...
在较小的显示屏上，侧边栏的一部分显示在主要内容的上方，第二部分显示在主要内容的下方
我有一个两列的引导布局：一个主要内容列和右侧的侧边栏列。 在足够大的屏幕上，两个侧边栏 DIV（主上方和主下方）都将显示在右侧...
我正在使用 bootstrap 和 sass。 Nodejs 与咕噜声。 应用程序.sss $icon-font-path: "/bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/"; $fa-字体路径：“/bower_components/font-awesome/
在引导卡页脚中，我试图在右侧显示“丢失”状态。问题是，如果我在 chrome 中给出一些 margin-left 来修复它，那么它在
我正在使用 bootstrap 4 上的表； 最后更新 我正在使用 Bootstrap 4 上的表；<div class="col-md-9"><h3>last updated</h3> <div class="liste"> <table class="table table-dark table-md table-responsive-md" id="tablex"> <thead class="thead-inverse"> <tr> <th>#</th> <th>Manga Adı</th> <th>Bölümler</th> <th>Yükleyen</th> <th>Linkler</th> </tr> </thead> <tbody> <tr> <td><i class="fas fa-file-download"></i></td> <td>Deneme deneme</td> <td>1-56</td> <td>libero1i</td> <td>yadi.sk/bilmemne</td> </tr> CSS： #tablex { border-collapse: collapse; border-radius: 1em; overflow: hidden; border: 0px; } #tablex tr, th { padding: 1em; border-bottom: 2px solid white; } 当我添加 border: 0px; 时，我也想删除半径。我怎样才能做到这一点？ 我认为您正在查看错误的元素 - 该边框要么位于表格的父元素上，要么位于顶部的标题上。
为什么这个类“font-weight-bold”不起作用？ [引导]
<head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/bootstrap.css"> </head> <body> <h1 class="h1">Bootstrap</h1> <p class="font-weight-bold">Palabra</p> <p class="font-italic">Palabra</p> </body> </html> 向 p 添加“font-weight-bold”类不会对文本进行任何更改 我能做什么？ 它是 font-weight-bold 用于 Bootstrap 4 和 class="fw-bold" 用于 Bootstrap 5 使用class= "fw-bold"对我有用。我正在使用 Bootstrap 5。 引导版本 5 <p class="fw-bold">YOUR_TEXT</p> 引导程序版本 4 <p class="font-weight-bold">YOUR_TEXT</p> 引导程序版本< 4<strong>YOUR_TEXT</strong> 对于其他样式，例如正常和斜体： 引导程序4 <p class="font-weight-normal">YOUR_TEXT</p> // Normal <p class="font-weight-light">YOUR_TEXT</p> // Light <p class="font-italic">YOUR_TEXT</p> // Italic 引导5 <p class="fw-bolder">Bolder weight text (relative to the parent element).</p> <p class="fw-normal">Normal weight text.</p> <p class="fw-light">Light weight text.</p> <p class="fw-lighter">Lighter weight text (relative to the parent element).</p> <p class="fst-italic">Italic text.</p> <p class="fst-normal">Text with normal font style</p> 你必须使用font-weight-bold但是你使用了text-weight-bold这就是为什么你的引导类风格不起作用 之前版本bootstrap 5使用class='font-weight-bold'，但是bootstrap 5使用class='fw-bold'
我在设置文本区域样式时遇到问题，我使用 bootstrap 4 css 我试图自己设计样式，但如果我使用填充或边距，它会使文本区域高度变大 .评论框{ 爸...
我有一个简单的 bootstrap-4 3 列网格。我希望中间的列是最宽的，但是它会错误地渲染列中的内容，并且输入的 innr 容器非常薄。当我
我想使用 JavaScript 更改一些引导变量值。我知道我可以使用 SCSS，但我现在的要求是它需要在单击时发生，所以我认为 JavaScript 是...
我有一个片段： 我有一个片段： <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <header> <div class="container"> <div class="row"> <div class="col-lg-3"> <div class="logo"> <img src="#" alt=" logotype"> </div> </div> <div class="col-lg-9"> <div class="head-buttons mr-auto"> <a href="">Русский</a> <div class="auth-buttons"> <button>Войти</button> <button>Регистрация</button> </div> </div> </div> </div> </div> </header> 我希望 col-lg-9 该 div 中的所有内容都向右对齐。为什么 mr-auto 不起作用？我该如何修复它？我尝试过并在行上justify-content-end，但不起作用.. 在 bootstrap 5 中，使用 ms-auto 代替 ml-auto，使用 me-auto 代替 mr-auto。 <ul className="navbar-nav ms-auto"> <ul className="navbar-nav me-auto"> 自动边距适用于 Flexbox 容器，但 col-lg-9 不是 Flexbox 容器。使用 d-flex 将其设为 Flexbox 容器，然后使用 ml-auto 将内容推到右侧。 <div class="row"> <div class="col-lg-3"> <div class="logo"> <img src="#" alt="logotype"> </div> </div> <div class="col-lg-9 d-flex"> <div class="head-buttons ml-auto"> <a href="">Русский</a> <div class="auth-buttons"> <button>Войти</button> <button>Регистрация</button> </div> </div> </div> </div> 另一种选择是使用 col-lg-auto 将右列的宽度缩小到其内容。然后柱上的 ml-auto 也将起作用。 <div class="row"> <div class="col-lg-3"> <div class="logo"> <img src="#" alt=" logotype"> </div> </div> <div class="col-lg-auto ml-auto"> <div class="head-buttons"> <a href="">Русский</a> <div class="auth-buttons"> <button>Войти</button> <button>Регистрация</button> </div> </div> </div> </div> https://www.codeply.com/go/4n4R9cNrqE mr-auto 用于设置 margin-right auto 不使用内容右对齐。 您想要将 col-lg-9 中的内容向右对齐，因此您需要使用 col-lg-9 将类添加到 text-right。 谢谢你。 你应该使用类 float-right 和 d-flex 而不是 mr-auto 。 有时最好使用 style 标签来设置 style="margin-left: auto" 这样就可以完美工作了。 <Nav className="ms-auto"> for float-right <Nav className="me-auto"> for float-left 将 .ml-* 和 .mr-* 重命名为 .ms-* 和 .me-*。 https://getbootstrap.com/docs/5.3/migration/#utilities-3
如何创建带有国家/地区代码的自定义手机号码输入框 - HTML
我正在尝试创建一个自定义移动输入框，其中手机号码和国家/地区代码由分隔线分隔，但无法做到这一点。 设计 目前的实施 我正在尝试创建一个自定义移动输入框，其中手机号码和国家/地区代码由分隔线分隔，但无法做到这一点。 设计 当前实施情况 <div class="col-md-6"> <p>Mobile</p> <div class="form-group mt-2"> <input type="text" class="form-control" id="ec-mobile-number" aria-describedby="emailHelp" placeholder="91257888" /> </div> </div> 如果有人能帮忙解决这个问题那就太好了。 这是为您提供的 5 分钟快速解决方案，请随意增强；） .form-group { border: 1px solid #ced4da; padding: 5px; border-radius: 6px; width: auto; } .form-group:focus { color: #212529; background-color: #fff; border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%); } .form-group input { display: inline-block; width: auto; border: none; } .form-group input:focus { box-shadow: none; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="container mt-2"> <div class="col-md-6"> <p>Mobile</p> <div class="form-group mt-2 d-inline-block"> <span class="border-end country-code px-2">+60</span> <input type="text" class="form-control" id="ec-mobile-number" aria-describedby="emailHelp" placeholder="91257888" /> </div> </div> </div> 使用引导程序： <div class="input-group"> <span class="input-group-text">+65</span> <input type="text" aria-label="phone" class="form-control"> </div>
Bootstrap 4.6 模态动画与 animate.css (4.1.1)
我正在尝试在打开和关闭时向 Bootstrap4.6 的模态添加一些动画。我已设法在打开模式时添加 animate.css (4.1.1) 类 ZoomIn 。然而，当
如果我的列中有一张卡片，需要有一个具有设定高度的图像，我如何使其不被拉伸，就像我的代码示例中当前那样？并且无需设置宽度...
我在 bootstrap4 中的按钮触及了桌子的顶部。如何添加一些间隙并将其与桌子边缘右对齐？ 我在 bootstrap4 中的按钮接触到了桌子的顶部。如何添加一些间隙并将其右对齐到桌子边缘？ <div class="container"> <div class="table-title"> <div class="row"> <div class="col-sm-8"><h5>Birds</h5></div> <div class="col-sm-4"> <button type="button" class="btn btn-info add-new"> <i class="fa fa-plus"></i> Add New </button> </div> </div> </div> <table class="table"> <thead class="table-light"> <tr> <th>Name</th> <th>Sex</th> <th>Status</th> <th>Owner</th> <th>IIS</th> <th>Actions</th> </tr> </thead> <tbody> <tr *ngFor="let bird of birds$ | async"> <td>bird</td> <td>sex</td> <td>status</td> <td>owner</td> <td>IIS</td> <td> <a style="padding-left:10px;"><fa-icon [icon]="iconEdit"></fa-icon></a> <a style="padding-left:10px;"><fa-icon [icon]="iconTrash"></fa-icon></a> </td> </tr> </tbody> </table> 我尝试添加一个空白行，但这没有任何作用。 尝试在 .py-3 上添加 <div class="col-sm-4">。 <div class="col-sm-4 py-3">。 详情可以参考这里