bootstrap-4 相关问题

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

我正在声明一个带有标题的表格： ... 我正在声明一个带有标题的表格： <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-bordered"> <caption>Why does this display below contents?</caption> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> 但是，即使 caption 元素是 table 的第一个子元素，当我使用 Bootstrap 类时，标题会显示在表格下方。如何将其移动到桌子上方？那是因为从版本 4 开始，Bootstrap 有了默认的标题 css 样式 - caption-side: bottom 当您更改caption-side: top;时，您的标题将显示在表格顶部。更新从版本5开始，您还可以使用<caption>将.caption-top放在桌子顶部： <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-bordered caption-top"> <caption>Caption displayed above contents</caption> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table>

html twitter-bootstrap bootstrap-4

回答 1 投票 0

动态创建树形视图下拉菜单 - $(this) 不适用于单击事件

我正在尝试动态创建此 bootstrap 4 下拉列表（请参阅@Gerhard Gotz 的回答）。硬编码列表对我有用，但是，我正在尝试动态创建此列表，然后填充我...

javascript jquery bootstrap-4

回答 1 投票 0

带有 Bootstrap 主题的 Select2 不支持输入组类

我尝试将 select2 与输入组一起使用，但按钮始终位于 select2 控件之后的下一行。如果删除 select2 类，它会按预期工作。为什么选择2

bootstrap-4 jquery-select2

回答 6 投票 0

CSS 按钮在 Mozilla Firefox 中无法内嵌显示

我的搜索按钮在 Mozilla Firefox 中显得不合适，我不知道为什么会这样。我正在将 Bootstrap 4 与 Angular 2 结合使用这是它在 Chrome 上的样子这就是它

html css angular bootstrap-4

回答 1 投票 0

引导行上的负边距

Bootstrap 行的边距（左侧和右侧）为 -15px。据我了解，这主要有两个原因： .container 的内边距（左和右）为 15px col-* 的间距为 15px。所以...

css twitter-bootstrap bootstrap-4

回答 5 投票 0

Bootstrap 4 - 右对齐导航栏项目[重复]

我正在尝试将我的导航栏项目与 Bootstrap 4 alpha 6 中的右侧对齐。我希望一切都正确对齐，除了品牌/标题之外。这就是我的代码的样子：我正在尝试将我的导航栏项目在 Bootstrap 4 alpha 6 中向右对齐。我希望所有内容都正确对齐，除了品牌/标题之外。这就是我的代码的样子： <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Oliver</a> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">About <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#projects">Projects</a> <a class="nav-item nav-link" href="#contact">Contact</a> </div> </div> </nav> 您可以将 .justify-content-end 添加到 .navbar-collapse 元素。我假设您还想将移动切换菜单项移至右侧。为此，请将 .align-items-end 添加到 .navbar-nav <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Oliver</a> <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup"> <div class="navbar-nav align-items-end"> <a class="nav-item nav-link active" href="#">About <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#projects">Projects</a> <a class="nav-item nav-link" href="#contact">Contact</a> </div> </div> </nav>

html css twitter-bootstrap bootstrap-4

回答 1 投票 0

背景图像底部和顶部有空白

我想让我的背景图像在移动设备上响应。当我更改 css 代码中的某些属性时，会出现各种问题。要么图像变得响应，但它引入了白色......

html css user-interface bootstrap-4 mobile-website

回答 1 投票 0

引导图像不尊重父级弹性尺寸

我正在尝试将图像、标题、按钮放置在另一个图像之上。问题是，在小屏幕尺寸上，小图像不会调整大小，并且超出了保持图像背景。

html css bootstrap-4 flexbox bootstrap-5

回答 1 投票 0

Bootstrap 4：如何使下拉链接的头部在导航栏中可点击

我正在使用 Bootstrap 4，并且有一个带有下拉链接的菜单项。除了可以使用下拉菜单来选择某些内容之外，我还想让菜单项的文本成为可点击的链接...

bootstrap-4

回答 3 投票 0

引导程序警报：如何在关闭时“隐藏”它们而不删除它们？

我正在使用 bootstrap 4 Alerts 来显示错误消息等，例如他们的演示： ... 我正在使用 bootstrap 4 Alerts 来显示错误消息等，例如他们的演示： <div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> You should check in on some of those fields below. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> 我还使用 AJAX 调用来执行表单 POST。我遇到的问题是，如果用户发帖，则会显示错误消息，但是如果用户单击关闭按钮并重新发帖，如果发生错误，因为他之前关闭了上一个错误，我无法取消隐藏带有 d-block 的警报容器，因为它根本不再存在于 DOM / Page 中。 DIV 元素被破坏了，或者至少，我在 Chrome 的开发者工具中看不到它。我怎样才能解决这个问题，以便我的关闭按钮只是“隐藏”容器，而不是销毁它或它所做的任何事情？即使用户关闭后我也需要能够重新显示它。干杯！帕特最终用 data-dismiss="alert" 类型的解决方案替换 onClick="$('#idOfDiv').addClass('d-none');"... 为您的帮助干杯！帕特您尝试过使用一些 jQuery 或 Javascript 吗？也许在右上角添加一些“箭头”图标。然后，将您的警报分为两部分：一部分是永久保留的细条，另一部分在单击时“切换” 将 data-dismiss="alert" 替换为 onclick="$(this).closest('.alert').hide()"： <div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> You should check in on some of those fields below. <button type="button" class="close" onclick="$(this).closest('.alert').hide();" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div>

javascript ajax bootstrap-4

回答 3 投票 0

错误折叠 Bootstrap 4.1 菜单

作为这些页面修改的一部分，我修改了菜单的行为，即单击某个项目时菜单会在移动设备上折叠。它的工作几乎完美无缺，除了一个......

javascript bootstrap-4

回答 1 投票 0

Fieldset：它的预期用途是什么？

我一直在阅读有关 fieldset 标签的内容，但我必须说我不太了解它的预期用途。它应该用于对表单控件进行分组，但是有什么用呢？有没有经过什么特殊处理...

html bootstrap-4 bootstrap-5

回答 1 投票 0

导航栏中左右对齐菜单项的问题

我有以下 html，它显示了我想要的内容，但不是我想要的位置;-)。我希望“文件”下拉列表位于左侧，其余下拉列表位于右侧。我已将我的 css 文件包含为...