bootstrap-4 相关问题

下拉菜单的 dropright 变体在 ng-bootstrap 中不起作用

我正在尝试将 dropright 变体集成到引导下拉列表中。我可以在引导文档中看到它 https://getbootstrap.com/docs/4.3/components/dropdowns/#dropright 他们已经给出了代码 &...

php Blade 并排对齐扩展布局

我正在尝试构建一个响应式仪表板，使用侧边栏在右侧进行导航，我将侧边栏构建为布局，并通过使用

Bootstrap 4 - 如何使图像转到右侧？

我正在尝试将一个简单的图像排成一行，并将其放置在页面的右侧。 如果我想用文本来做到这一点，我会简单地这样做： 我正在尝试将一个简单的图像排成一行，并将其放置在页面的右侧。 如果我想用文本来做到这一点，我会简单地这样做： <div clas="row"> <div class="col text-right"> <h1>Im on the right</h1> </div> </div> 好像没有对应的image-right。有 float-right，但这会将下面的文本拉到上方，这不是我们想要的。 尝试过这个，但没有效果： <div class="row"> <div class="col"> <img src="images/MyLogo.png" class="pull-right" style="height: 200px" alt="our Logo"> </div> </div> 作为一名老派 html 表用户，我认为我可以在左侧创建虚拟空列，尽管这不是我们想要的，因为当屏幕变小时，列会“中断”： <div class="row"> <div class="col-xs-10"> <div> <div class="col-xs-2"> <img src="images/MyLogo.png" style="height: 200px" alt="our Logo"> </div> </div> </div> 但这也会使图像牢牢地粘在左侧。 有什么建议如何将图像放在页面的右侧，并保持左侧的空间为空白吗？ 这里不太清楚你的目标是什么（添加更多细节或提供准确的 html 代码可能会澄清问题），但如果我理解正确的话，你需要一个图像来获取整行并向右浮动，并在右边留出空间图像的左侧应该是空的。如果是这种情况，这应该适合你： <div class="row"> <div class="col"> <img src="images/MyLogo.png" class="pull-right" style="height: 200px" alt="our Logo"> </div> </div> .col { text-align: right; } .pull-right { margin: 0 0 0 auto; } 您可以使用 Flex 实用程序d-flex justify-content-end: <div class="row"> <div class="col d-flex justify-content-end"> <img src="" alt=""> </div> </div> 参考 Bootstrap DOCS 您可以使用rounded float-right代替pull-right： <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <div class="row"> <div class="col"> <img src="https://dummyimage.com/150x100/000/fff" class="float-right" alt="our Logo"> </div> </div>

当我缩小到移动显示时，如何使两个重叠的弹性盒项目并排在一行中以具有响应式显示？

我正在编写一个小的 HTML CSS 代码，用于在一行中并排显示两个重叠的内容（图片）。当我将宽度缩小到移动显示时，我的目标是将它们一个一个地显示......

使用`bs_theme()`时减少引导表单元格填充

# 标题 ## 加载包 图书馆（闪亮） 图书馆（tidyverse） 库（DT） 库（bslib） 用户界面 <- navbarPage("Test", inverse = T, collapsible = T, ...

使用 Bootstrap 4 将动态 div.card 水平居中

我正在基于 Bootstrap 4 的网站上列出数据库中的文章。我希望块 (div.card) 始终水平居中，无论有多少块，最多 3 个块...

目标类[文件]不存在

我想在我的代码中添加一个甜蜜的警报，但是当我这样做时，它给了我这个错误，我使用 laravel 12 PS C:\xampp\htdoc

Summernote 样式不起作用

我做了一个小提琴来暴露我在桌面上遇到的同样的问题。 在summernote编辑器中，应用字体大小和字体系列是有效的，但我无法将字体设置为粗体、斜体、删除线、超级字符...

Google Chrome 多个背景图片位置

我想在同一个元素上显示多个背景图像。 我的实现如下所示：（使用引导程序） 我想在同一个元素上显示多个背景图像。 我的实现如下所示：（使用引导程序） <a class="left-icon icon-share list-group-item list-group-item-primary list-group-item-action">Exportable</a> .list-group-item-action.left-icon { background-image: var(--icon-auto-url), var(--list-group-action-icon); background-position-x: var(--list-group-icon-padding-x), right var(--list-group-icon-padding-x); background-position-y: center; } 这在 Safari 中可以按预期工作，但在 Chrome 中却不行。有什么想法我做错了什么吗？ 野生动物园： 谷歌浏览器： 并非所有网络浏览器都以相同的方式读取代码。您的代码的问题是所有浏览器（包括 Chrome）均不支持“background-position-x”。更广泛使用的属性就是“背景位置”。 您可以执行以下操作： .list-group-item-action.left-icon { background-image: var(--icon-auto-url), var(--list-group-action-icon); background-position: var(--list-group-icon-padding-x) center, right var(--list-group-icon-padding-x) center; } 这样，您就可以将 x 和 y 坐标放入应该支持的背景位置属性中。

如何防止react-json-schema-form中的字段逐行出现

我正在使用 React-json-schema-form 创建表单。我不明白如何更改我创建的表单的布局。它们默认显示在行中，并向...中的每个字段添加类

如何使 schema 依赖关系以 React json 形式显示在一行中

我正在使用 React json 架构表单（https://react-jsonschema-form.readthedocs.io/）来创建通过架构呈现的表单。我正在尝试根据选择的...

从导航栏切换中排除项目

我如何从 Bootstrap 4 上的折叠中排除 ['label' => 'Home', 'url' => ['/site/index']]？ 使用 yii ootstrap4\NavBar； 使用 yii ootstrap4\Nav; 导航栏::开始([ 'brandLabel' => 'NavBa...

另一个下拉菜单中的下拉菜单

我有一个问题。我想在“游戏”下拉菜单中创建“我们的选择”下拉菜单，但我不知道为什么代码不起作用。你们能告诉我问题出在哪里吗？ 我有一个问题。我想在“游戏”下拉菜单中创建“我们的选择”下拉菜单，但我不知道为什么代码不起作用。你们能告诉我问题出在哪里吗？ <div class="collapse navbar-collapse" id="menu"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Games</a> <ul class="dropdown-menu games-menu" > <li><a href="latest.html" class="dropdown-item">Latest</a></li> <li><a href="best_selling.html" class="dropdown-item">Best Selling</a></li> <div class="dropdown"> <li><a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown">Our Pick</a></li> <ul class="dropdown-menu games-menu"> <li><a href="2019.html" class="dropdown-item">2019</a></li> <li><a href="2020.html" class="dropdown-item">2020</a></li> </ul> </div> </ul> </li> </ul> </div> 您可以简单地添加另一个嵌套的 li，其中包含另一个 dropdown，并使用自定义 CSS 在悬停时显示该 dropdown。 现场工作演示： .sub-menu:hover .games-menu { display: block; } .sub-menu2:hover .our-pick-menu { display: block; } <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <div class="navbar-collapse" id="menu"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Games</a> <ul class="dropdown-menu games-menu"> <li><a href="latest.html" class="dropdown-item">Latest</a></li> <li><a href="best_selling.html" class="dropdown-item">Best Selling</a></li> <div class="dropdown"> <li class="sub-menu"><a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown">Our Pick</a> <ul class="dropdown-menu games-menu"> <li><a href="2019.html" class="dropdown-item">2019</a></li> <li><a href="2020.html" class="dropdown-item">2020</a></li> <div class="dropdown"> <li class="sub-menu2"><a href="#" class="dropdown-item dropdown-toggle our-pick-2" data-toggle="dropdown">Our Pick 2</a> <ul class="dropdown-menu our-pick-menu"> <li><a href="2019.html" class="dropdown-item">2021</a></li> <li><a href="2020.html" class="dropdown-item">2022</a></li> </ul> </li> </div> </ul> </li> </div> </ul> </li> </ul> </div>

Bootstrap Table 不是通过按钮刷新新数据，而是通过重新加载来完成

嗯，我已经配置了引导表以在工具栏中显示刷新按钮。 数据显示刷新=“真” data-url 表属性已正确配置。证明这一点的是...

初始页面加载时光滑滑块宽度为 0

我在使用 Slick Slider 时遇到了一个非常奇怪的问题。 有时，在第一页加载时，幻灯片和轨道宽度被设置为 0。 我已经尝试了很多解决方案，包括......

带分隔符的引导按钮组

如何获取每个按钮之间带有边框线分隔符的 Bootstrap 按钮组？ 如何获取每个按钮之间带有边框线分隔符的 Bootstrap 按钮组？ <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> </div> https://getbootstrap.com/docs/4.6/components/button-group @padaleiana 解决方案运行良好！我使用了 btn-light 禁用按钮作为分隔符。 解决方法： 创建一个带有 mr-0、ml-0、pl-0 和 pr-0 类的按钮（左右边距和填充 = 0），并带有 disabled 属性（否则“分隔符”将不会出现！） <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary mr-0 ml-0 pr-0 pl-0" disabled></button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary mr-0 ml-0 pr-0 pl-0" disabled></button> <button type="button" class="btn btn-secondary">3</button> </div> padaleiana 的答案的替代方案如下，它不使用 HTML 按钮标签。因此，当 jQuery（或其他 Javascript）迭代按钮时，它可以避免出现问题： <div class="alert alert-dark m-0 px-0"></div> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-secondary">1</button> <div class="alert alert-dark m-0 px-0"></div> <button type="button" class="btn btn-secondary">2</button> <div class="alert alert-dark m-0 px-0"></div> <button type="button" class="btn btn-secondary">3</button> </div> 可以只添加类“btn-outline-secondary”或任何一个适合您需要的每个按钮......例如：- <div class="btn-group btn-group-sm"> <button class="btn btn-light btn-outline-secondary btn-sm">Btn One</button> <button class="btn btn-light btn-outline-secondary btn-sm">Btn Two</button> <button class="btn btn-light btn-outline-secondary btn-sm">Btn Three</button> </div>

Bootstrap Tooltip 放置问题

我在使用引导工具提示时遇到问题，我将其位置设置为“顶部”，并且我已在用户名上实现此工具提示，但问题是用户名是否合适

在打开的 Bootstrap 4 模式中更新选项/配置

我正在将模态从 Bootstrap 3 升级到 4。我有一些代码将更新打开模态的选项（特别是背景和键盘选项）。在 Bootstrap 3 中我完成了这个...

将图标添加到选择标签中并向该图标添加操作

我正在尝试在我的组件 vuejs 3 中执行“预览操作”。 为此，我正在尝试： 我正在尝试在我的组件 vuejs 3 中做一个 "preview action"。 为此，我正在尝试： <select class="selectpicker"> <option @click='prueba($event)' data-content="<i class='fa fa-eye mr-5' aria-hidden='true'></i>Option1"></option> </select> 生成： 但是我希望当我点击眼睛时，打开带有信息合同的模式来选择此合同或其他...我的问题是@click不运行，不去功能“prueba”并显示console.log() 我不知道是否存在一种更好的方法来构建这个，我正在使用 bootstrap 4 和 vuejs 3。我认为我最好的方法是链接到 select 并且此链接打开带有信息契约的模式。但如果有人有其他更好的解决方案，我会接受它。 感谢您的自述和帮助我 选项元素并非设计为直接支持点击事件。 <select class="selectpicker" @change='prueba($event)'> <option data-content="<i class='fa fa-eye mr-5' aria-hidden='true'></i>Option1"></option> </select>

asp.net中下拉多个列表选择

这是默认下拉单选无复选框无按钮列表代码（在WebAPP.NET框架中）： 这是默认下拉单选无复选框无按钮列表代码（在WebAPP.NET框架中）： <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:ODWConnectionString_Live %>" SelectCommand="SELECT DISTINCT ISNULL(NULLIF(CZF_ODW, 'NA'), 'Other') AS CZF_ODW FROM dbo.WebAppTestView;"></asp:SqlDataSource> <td class="required" align="right" style="text-align: right;"> <span class="catchment">Catchment Zone:</span> </td> <td> <asp:DropDownList ID="ddlField1" runat="server" CssClass="textfield" Width="200px" OnSelectedIndexChanged="ddlField1_SelectedIndexChanged" style="width: 182px; margin: 9px;" DataSourceID="SqlDataSource3" DataTextField="CZF_ODW" DataValueField="CZF_ODW" AppendDataBoundItems="true"> <asp:ListItem Value="All"></asp:ListItem> </asp:DropDownList> </td> </td> 需要将上面的下拉列表代码转换为带按钮的多选复选框下拉列表。 好吧，如果可能的话，使用列表框可以进行多项选择，但当然会占用更多的屏幕空间。 asp.net 中没有内置的多选组合框（DropDownList）。 因此，您可以采用第三方库。一个相当常见的选择是名为 select2 的 jQuery 插件。 下一个问题是 select2 加载项无法与 asp.net DropDownList 很好地配合，但如果您放入 HTML“select”元素，它确实可以正常工作。 事实证明 DropDownList 无论如何都是基于 HTML select 元素的。事实上，如果您使用 runat="server" 标记选择，那么您的功能与下拉列表非常相似。唯一缺少的功能是 autopostback="true"。而且你没有注意到你是否需要这种能力。 让我们构建一个示例，并假设我们需要组合框的自动回发。 为此，我们添加 JavaScript onchange 事件（客户端），然后只需单击表单上的按钮即可。该按钮（最终）应该用 style="display:none" 隐藏。 因此，我们的标记如下所示： <div style="float: left"> <h4>Select Multiple Cites</h4> <select id="DropDownList1" runat="server" clientidmode="static" datatextfield="City" multiple="true" style="width: 500px" onchange="mychange()"> </select> <script> function mychange() { $('#Button1').click() } </script> </div> <div style="float: left; margin-left: 35px; margin-top: 40px"> <asp:Button ID="Button1" runat="server" Text="Show Hotels" ClientIDMode="Static" CssClass="btn" OnClick="Button1_Click" /> </div> <div style="clear: both; height: 20px"></div> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" CssClass="table" Width="40%"> <Columns> <asp:BoundField DataField="FirstName" HeaderText="FirstName" /> <asp:BoundField DataField="LastName" HeaderText="LastName" /> <asp:BoundField DataField="HotelName" HeaderText="HotelName" /> <asp:BoundField DataField="City" HeaderText="City" /> <asp:BoundField DataField="Description" HeaderText="Description" /> </Columns> </asp:GridView> <script> $(document).ready(function () { console.log("on page load select2 combo box setup") $('#DropDownList1').select2() }); </script> 我们背后的代码是这样的： Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not IsPostBack Then LoadData() End If End Sub Sub LoadData() Dim rstHotels As DataTable rstHotels = MyRst("SELECT City FROM tblHotels WHERE City is not null GROUP BY City") DropDownList1.DataSource = rstHotels DropDownList1.DataBind() End Sub Protected Sub Button1_Click(sender As Object, e As EventArgs) LoadGrid() End Sub Sub LoadGrid() Dim strSQL As String = "SELECT * FROM tblHotelsA" Dim strWhere As String = "" Dim cmdSQL As New SqlCommand() Dim ParamCount As Integer = 0 Dim sP As String = "" For Each MyPick As ListItem In DropDownList1.Items Debug.Print($"Item = {MyPick.Text} selected = {MyPick.Selected}") If MyPick.Selected Then If strWhere <> "" Then strWhere &= "," ParamCount += 1 sP = $"@P{ParamCount}" strWhere &= sP cmdSQL.Parameters.Add($"@P{ParamCount}", SqlDbType.NVarChar).Value = MyPick.Text End If Next If strWhere <> "" Then strSQL &= $" WHERE City IN ({strWhere}) " End If strSQL &= " ORDER BY HotelName" cmdSQL.CommandText = strSQL Dim dt As DataTable = MyRstP(cmdSQL) GridView1.DataSource = dt GridView1.DataBind() End Sub 请注意，在上面，我们仍然使用 SQL 参数，因此代码不会受到潜在的 SQL 注入的影响。 当然，如果您不需要也不希望自动回发，那么您可以删除按钮以及附加到 select 元素的 onchange JavaScript 代码。