bootstrap-4 相关问题

Bootstrap 模式将页面滚动到顶部

打开模式的按钮位于页面底部附近，但模式在顶部打开并将页面滚动到顶部。 我想要： 停止将页面滚动到顶部， 在当前视图中显示模态...

Bootstrap 4：如何内联应该隐藏在小屏幕上的文本？

对于这个特定的应用程序，我试图在较小的屏幕上隐藏文本，只显示左侧的图标（来自 font Awesome 的评论图标）： 对于这个特定的应用程序，我试图在较小的屏幕上隐藏文本，只显示左侧的图标（来自 font Awesome 的评论图标）： <a id="newCommentLink" href="#"> <i class="fa fa-comments text-secondary"></i> <span class="d-none d-md-block">Comment</span> </a> 从上面的代码中可以看到，我想要的是文本“评论”在移动屏幕（xs 和 sm 尺寸）上隐藏，因此它只显示在中到大尺寸的屏幕上。但是，此 HTML 代码将在图标下方显示文本“注释”，而不是在图标旁边。我无法内联图标和文本。有人知道如何解决这个问题，使文本与图标内联显示吗？ 几个选项： 只需在 d-flex 上使用 a <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <a class='d-flex' id="newCommentLink" href="#"> <i class="fa fa-comments text-secondary"></i> <span class="d-none d-md-block">Comment</span> </a> 使用 d-md-inline-block / d-md-inline-flex 代替 d-md-block <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <a id="newCommentLink" href="#"> <i class="fa fa-comments text-secondary"></i> <span class="d-none d-md-inline-block">Comment</span> </a>

Bootstrap 4 水平文本对齐在 <span>

我有以下代码： 🐯 我有以下代码： <div class="card" > <div class="card-block"> <h4 class="card-title"> <span class="text-left">🐯</span> <span class="text-right">Drago</span> </h4> <span class="card-text"> Location: ???<br> District: ???<br> Last updated: Tue, May 8th 2018 </span><br><br> <div class="card-buttons" class="text-center"> <a href="#" class="btn btn-primary btn-sm"><i class="fas fa-user-cog"></i> Edit User</a> <a href="#" class="btn btn-primary btn-sm"><i class="fas fa-home"></i> Manage Addresses</a> <a href="#" class="btn btn-danger btn-sm"><i class="fas fa-trash-alt"></i> Delete</a> </div> </div> </div> 我正在尝试在 Bootstrap 4 中制作一张卡片。 我确实希望 <h4> 中的表情符号向左对齐，其后面的文本向右对齐。我正在尝试这样做： <h4 class="card-title"> <span class="text-left">🐯</span> <span class="text-right">Drago</span> </h4> 但这不起作用，我明白： 我也尝试在没有引导类的情况下做到这一点。使用 style="text-align: left" 和 style="text-align: right"。但这似乎也不起作用。 当我使用 <div> 时，水平对齐效果很好。我仅在显示属性设置为 <span> 和 <div> 的 inline-block 和 inline-flex 时遇到此问题。 您会使用 float-right，因为 .card-title 是 display:block... <h4 class="card-title"> <span>🐯</span> <span class="float-right">Drago</span> </h4> https://www.codeply.com/go/CMrl4JydKp 使用 text-right 适用于内联元素的父元素。 更新：如果您尝试在 Bootstrap 5 中实现此目的，则该类将重命名为 float-end：https://getbootstrap.com/docs/5.0/utilities/float/ .card-title { display: flex; flex-wrap: wrap; } .text-right { margin-left: auto; } 例如，您可能希望向卡片标题添加自定义类，因此您通常不会调整所有卡片标题。 小提琴：https://jsfiddle.net/2xv2t12c/ 希望这有帮助！ BS4 更新：- 为响应式浮动添加了 .float-{sm,md,lg,xl}-{left,right,none} 类，并删除了 .pull-left 和 .pull-right 因为它们对 .float 来说是多余的-向左和.float-right。 所以使用 float right 并且我在 h4 下添加了一个 br 标签，这样下面的跨度就不会溢出到 h4 中。 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="card"> <div class="card-block"> <h4 class="card-title "> <span class="float-left">🐯</span> <span class="float-right">Drago</span> </h4> <br/> <span class="card-text"> Location: ???<br> District: ???<br> Last updated: Tue, May 8th 2018 </span><br><br> <div class="card-buttons" class="text-center"> <a href="#" class="btn btn-primary btn-sm"><i class="fas fa-user-cog"></i> Edit User</a> <a href="#" class="btn btn-primary btn-sm"><i class="fas fa-home"></i> Manage Addresses</a> <a href="#" class="btn btn-danger btn-sm"><i class="fas fa-trash-alt"></i> Delete</a> </div> </div> </div>

bootstrap v4.5 中的 justify-content-center 类不起作用

我正在尝试为我正在为本地企业设计和编码的网站创建一个响应式联系我们部分，但是 bootstrap v4.5 中的 justify-content-center 类并未将图标居中...

Django 表单验证错误未通过 Bootstrap 警报警报危险样式显示

我正在开发一个 Django 项目，在该项目中我使用 Bootstrap 来设置表单验证错误消息的样式。然而，虽然表单验证有效（我可以看到纯文本中的错误），但错误不是

Angular：无法加载图像：404（未找到）

我下载了这个免费主题，以便在 WebStorm 的 Angular 项目中使用它，但我收到此错误： 无法加载资源：服务器响应状态为 404（未找到） ...

在 bootstrap 中使用 3d 图标制作卡片视图

我正在尝试使用 Bootstrap 4 和一些自定义 CSS 样式来实现这一点 这是我到目前为止所拥有的： 我正在尝试使用 Bootstrap 4 和一些自定义 CSS 样式来实现这一点 这是我到目前为止所拥有的： <div class="container"> <div class="row"> <div class="col-4"> <div class="card"> <div class="card-header d-flex justify-content-around"> <div class="card-icon"> <i class="fa fa-exclamation-circle" aria-hidden="true"></i> </div> <div class="card-category"> <p>Used Space</p> <h3>49/50</h3> </div> </div> <div class="card-body "> </div> <div class="card-footer text-muted"> 2 days ago </div> </div> </div> </div> </div> 我无法得到这个结果，我是 CSS 和 Bootstrap 的新手。 <style> .custom-card { width: 250px; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); background-color: white; position: relative; } .icon { background-color: #FFA500; border-radius: 8px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; position: absolute; top: -25px; left: 20px; } .used-space { font-size: 28px; font-weight: bold; margin-top: 30px; } .label { font-size: 14px; color: gray; margin-bottom: 20px; } .alert-warning { font-size: 14px; color: red; } </style> <div class="container mt-5 d-flex justify-content-center"> <div class="custom-card"> <div class="icon">📄</div> <div class="used-space">49/50 GB</div> <div class="label">Used Space</div> <div class="alert-warning">⚠️ Get More Space...</div> </div> </div>

我无法让引导图标在文本旁边垂直居中

我无法将引导星形图标置于我正在设计的网站中评论文本旁边的中心。我将 svgs 嵌入到我的代码中。我在这里也使用一些 Bootstrap 4 类作为上下文。方法如下

如何在下一页继续统计IPgedList的记录数？

当我在此示例中拥有超过 50 条记录时，如何在下一页上继续使用 IPgedList 计算记录数。 在表中我用这段代码进行计数： 整数a=1； @(a++) 对于 iPagedList ...

如何从有效控件中禁用 Bootstrap 4 验证样式

我正在为我的应用程序使用 Bootstrap 4 样式。应用程序有两个文本框和一个提交按钮。当您单击“保存”按钮时，它将调用 Web API 并异步获取一些详细信息（我...

如何设置Bootstrap 4相对于父div的列宽

我正在使用 Bootstrap 4 并尝试创建一个简单的布局。两列，分为9列和3列。第一列内只是文本。但我需要 1 列的填充。没有 1 栏...

“下一步”按钮显示为使用 Bootstrap 的 R Shiny DataTable 的文本

通常，Shiny DT 会有可见的按钮来查看接下来的 X 条记录。当指定 style="bootstrap" 时，这些按钮会变成文本“previous12345...8Next”

bootstrap v4.5 中的 justify-content-center 类不起作用，即使我的 html 与 bootstrap 文档中的 html 完全匹配

我正在尝试为我正在为本地企业设计和编码的网站创建一个响应式联系我们部分，但是 bootstrap v4.5 中的 justify-content-center 类并未将图标居中...

Javascript React 应用程序“fetch”在从浏览器重新加载时返回“未定义”，但在从 API 重新加载时返回数据

我有一个从github拉取json对象的组件 异步函数 getQueryJson(URL) { wait fetch(URL) // 这会获取 git 提交 .then( (res) => res.json()) //转换为JSON ....

如何将 div 元素与 Bootstrap 4 重叠？

我正在尝试实现与附加文件相同的重叠元素。我想知道最好的代码来做到这一点。 我正在使用 bootstrap 4.6.2，它有帮助吗？ 谢谢你的建议。 到目前为止...

Summernote 合并段落后添加跨度

我正在尝试围绕 Summernote (BS4) 构建内容创作应用程序，但遇到了一个不太有用的功能。 给出两段： 敏捷的棕色狐狸跳过去...... 我正在尝试围绕 Summernote (BS4) 构建一个内容创作应用程序，但遇到了一个不太有用的功能。 给出两段： <p>The quick brown fox jumps over the lazy dog.</p> <p>One, two, three, four.</p> 如果在编辑器中我使用退格键合并两个段落，我会期待这样的结果...... <p>The quick brown fox jumps over the lazy dog.One, two, three, four.</p> 这正是您在 Summernote 主页上尝试示例实现时得到的结果 但相反，我得到... <p>The quick brown fox jumps over the lazy dog.<span style="background-color: rgb(255, 255, 255); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 1rem;">One, two, three, four.</span></p> （即：具有大量样式的 <span> 元素，围绕第二段） 非常感谢您能解释一下这里发生的事情以及如何防止它发生。 非常感谢！ CDN： <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.js"></script> HTML： <div id="summernote"></div> jQuery： $('#summernote').summernote(); 更新： 我注意到，如果我使用 Summernote-lite 而不是 Summernote-bs4 并删除 BS4 CDN，问题就不再存在。 如果我坚持使用 Summernote-lite 但重新引入 BS4，那么问题又会出现！ CDN 没有问题： <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.js"></script> 有问题的 CDN： <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.js"></script> 让我相信这是一个与 Bootstrap 相关的问题...... 更新2： 这实际上似乎是一个 Summernote 问题，实际上可以在 here 找到的 BS4 示例上复制，我现在已在 Github here 上报告了该示例。 我遇到了同样的问题，我通过向 note-editable 类添加 css 规则来解决： .note-editable * { line-height: inherit!important; font-size: 14px!important; font-family: 'Open Sans'; } 这为我解决了这个问题。 2024 年，同样的问题，Sachi Cortes 修复对我不起作用。有什么解决办法吗？

如何在Bootstrap 4中将不同尺寸的图像放入轮播中？

我在 Bootstrap 4 中将不同尺寸的图像放入轮播中时遇到问题。如何将不同尺寸的图像放入此轮播中。 例如，我想放置不同大小的

如何在Bootstrap 4中将不同尺寸的图像放入轮播中？

我在 Bootstrap 4 中将不同尺寸的图像放入轮播中时遇到问题。如何将不同尺寸的图像放入此轮播中。 例如，我想放置不同大小的

CSS 响应式图像网格

我正在努力创建一个响应式图片库。我正在使用 CSS 和 Bootstrap，我尝试使用标签，作为背景，我无法让它工作。 所以，这就是我想要实现的目标： https://...

如何防止我的 Bootstrap 轮播溢出？

我正在用 bootstrap 构建一个投资组合，顶部有轮播，但它溢出了更多，使其水平滚动。 轮播 html 我正在用 bootstrap 构建一个投资组合，顶部有轮播，但它溢出了更多，使其水平滚动。 Carousal html <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> <li data-target="#carouselExampleIndicators" data-slide-to="3"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="img/animewallpaper7.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="img/animewallpaper8.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="img/animewallpaper9.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="img/animewallpaper6.jpg" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> 这是我的CSS /* Ensure the carousel spans the full width of its container */ .carousel { width: 100%; margin: 0 auto; /* Center the carousel within its container */ } /* Remove extra padding and margin around the images */ .carousel-item img { width: 100%; /* Ensures the image covers the full width of the item */ height: 600px; /* Adjusts the height based on the width */ } 我需要轮播的大小与浏览器的大小一致，并且不会溢出，并且仍能保持响应速度 我假设您正在使用最新的引导程序，引导程序5。您只需要做的就是使图像的每个父级从body和html开始高度为100％。 html, body { height: 100%; margin: 0; padding: 0; } .carousel { width: 100%; height: 100%; } .carousel-inner { height: 100%; } .carousel-item { height: 100%; background-image: url("https://placehold.co/600x400"); background-size: cover; background-position: center; background-repeat: no-repeat; } <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script> <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"> <ol class="carousel-indicators"> <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li> <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li> <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li> <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a> </div> 这是一个简短的答案，但我希望它有用。 您的问题没有显示这一点，但根据我的经验，当您将全角轮播放入容器中时，可能会发生这种情况。 Carousels 的 item div 内已经有适当的容器，因此它们不需要嵌套在容器中。 谢谢大家的解答。 我找到了解决办法... html { overflow-x: hidden; /* Prevents horizontal scrolling */ }