bootstrap-4 相关问题

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

我有一个问题。我想在“游戏”下拉菜单中创建“我们的选择”下拉菜单，但我不知道为什么代码不起作用。你们能告诉我问题出在哪里吗？我有一个问题。我想在“游戏”下拉菜单中创建“我们的选择”下拉菜单，但我不知道为什么代码不起作用。你们能告诉我问题出在哪里吗？ <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; }  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>  <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>

html twitter-bootstrap bootstrap-4

回答 1 投票 0

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

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

javascript jquery bootstrap-4 .net-8.0 bootstrap-table

回答 1 投票 0

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

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

bootstrap-4 slick.js

回答 8 投票 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>

css twitter-bootstrap button bootstrap-4 border

回答 3 投票 0

Bootstrap Tooltip 放置问题

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

javascript html web bootstrap-4 tooltip

回答 1 投票 0

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

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

javascript twitter-bootstrap bootstrap-modal bootstrap-4 twitter-bootstrap-4

回答 3 投票 0

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

我正在尝试在我的组件 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>

javascript html bootstrap-4 vuejs3

回答 0 投票 0

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 代码。

javascript html css asp.net bootstrap-4

回答 1 投票 0

如何解决 Angular 项目中的 Tailwind 和 Bootstrap 冲突

我在同一个 Angular 项目中使用 Tailwind CSS 和 Bootstrap (ngx-bootstrap)。大多数情况下，他们相处得很好。然而，当涉及到内边距和边距时，他们就像兄弟姐妹一样战斗......

css user-interface bootstrap-4 tailwind-css

回答 4 投票 0

引导卡宽度相同

我希望我的卡片覆盖屏幕的宽度，但我的代码如下。尝试过卡组，但没有帮助。我希望我的卡片覆盖屏幕的宽度，但我的代码如下。尝试过card-deck，但没有帮助。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"> </head> <body> <div class="container p-3 bg-white rounded"> <div class="row"> <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="row"> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">0-10</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">1-9</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">2-8</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">3-7</h5> <p class="card-text">00</p> </div> </div> </div> </div> </div> <div class="carousel-item "> <div class="row"> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">4-6</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">5-5</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">6-4</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">7-3</h5> <p class="card-text">00</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html> 在 div 块中将 col-lg-3 更改为 col-lg-auto，以便它在屏幕上占据相同的宽度尝试使用 .card-columns 类，如下所示： <div class="card-columns"> <div id="card1" class="card"> <img class="card-img-top" src="" alt="Card image cap"> <div class="card-body"> <h5 class="card-title"> CARD 1 TITLE </h5> </div> <div class="card-body"> CARD 1 BODY </div> </div> <div id="card2" class="card"> <img class="card-img-top" src="" alt="Card image cap"> <div class="card-body"> <h5 class="card-title"> CARD 2 TITLE </h5> </div> <div class="card-body"> CARD 2 BODY </div> </div> </div> 并删除 row 和 col div，卡片列类负责剩下的

twitter-bootstrap bootstrap-4 column-width bootstrap-carousel bootstrap-cards

回答 2 投票 0

如何在 Bootstrap 轮播中启用每 10 秒自动滑动 2 个图像和一个视频？

我正在尝试创建一个图像和视频组合的滑块。我尝试使用引导程序来实现，但是我失败了。这是下面的代码我正在尝试创建一个图像和视频组合的滑块。我尝试使用引导程序来实现，但是我没有这样做。下面是代码 <div id="carousel-slider" class="carousel slide carousel-fade" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#carousel-slider" data-slide-to="0" class="active"></li> <li data-target="#carousel-slider" data-slide-to="1"></li> <li data-target="#carousel-slider" data-slide-to="2"></li> </ol>   <div class="carousel-inner" role="listbox">  <div class="carousel-item active"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide"> </div>   <div class="carousel-item"> <video src="./video/video1.mp4" autoplay poster="./images/boardwalk.jpg"></video> </div>   <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide"> </div>  </div> </div> 我需要三张幻灯片，其中两张是图像幻灯片，一张是视频幻灯片，每 15 秒更改一次。有没有办法使用jquery添加自定义幻灯片只需将 data-interval 属性添加到引导轮播中，即可每隔 x 秒自动滚动到下一张幻灯片。请注意，data-interval在milliseconds中计算您的值，因此如果您想每10秒后更改轮播幻灯片，则需要添加data-interval=10000。检查并运行以下代码片段，获取有关如何使用 data-interval 属性自动滑动轮播的实际示例： /* CSS */ html, body {margin: 0px; padding: 0px; width: 100%; height: 100%;} .wrapper { margin: 0 auto; width: 100%; } .carousel-item img {width: 100%; height: 200px;} .carousel-item video {width: 100%; height: 200px;}  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="wrapper"> <div id="carousel-slider" class="carousel slide carousel-fade" data-ride="carousel" data-interval="2000">  <ol class="carousel-indicators"> <li data-target="#carousel-slider" data-slide-to="0" class="active"></li> <li data-target="#carousel-slider" data-slide-to="1"></li> <li data-target="#carousel-slider" data-slide-to="2"></li> </ol>   <div class="carousel-inner" role="listbox">  <div class="carousel-item active"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide"> </div>   <div class="carousel-item"> <video controls> <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> </video> </div>   <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide"> </div>  </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> 我真的很喜欢 http://kenwheeler.github.io/slick/ 的 jquery 滑块。我认为这会对你有很大帮助。我在下面为您制作了一个示例： //Initialize your slider in your script file $("#carousel-slider").slick({ arrows: false, infinite: true, slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 1500, mobileFirst: true });  <head> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" /> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" /> </head> <div id="carousel-slider"> <div> <img style="width:100%; height:100%;" class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide"> </div> <div> <video style="width:100%; height:100%;" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" autoplay></video> </div> <div> <img style="width:100%; height:100%;" class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide"> </div> </div>  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>  <script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script> 您可以将“autoplaySpeed”更改为您想要更改的任何间隔。将 data-bs-ride="carousel" 放在包含 id="carousel-slider" 的 div 中，将 data-bs-interval="10000" 放在包含 class="carousel-item 的 div 中“

jquery html bootstrap-4 slider

回答 3 投票 0

Bootstrap 4.0 - 使用弹性列

您好，您能帮我在代码中设置列吗？我有这个代码：侧边菜单&l... 您好，您能帮我在代码中设置列吗？我有这个代码： <div class="container-fluid h-100"> <div class="row h-100"> <div class="flex-column h-100">side menu</div> <div class="???"> <div>1 piece</div> <div>2 pieces piece</div> <div>1 piece</div> <div/> <div/> <div/> 这是我的实际结果，其中我画出了如何分割其余空间。带菜单的蓝色栏应该固定，实际做什么。柱子比例1:2:1可调。代替 row，您可以使用 d-flex 作为 row 罐 wrap - 内容可以放在侧边栏下方。对于内容，如果你必须保留 html 结构，你可以使用这个： <div class="d-flex w-100"> <div class="col-3">1 piece</div> <div class="col-6">2 pieces piece</div> <div class="col-3">1 piece</div> </div> 请参阅下面的演示 - 添加边框以供说明： html,body { height: 100%; } div { border: 1px solid; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid h-100"> <div class="d-flex h-100"> <div class="flex-column h-100">side menu</div> <div class="d-flex w-100"> <div class="col-3">1 piece</div> <div class="col-6">2 pieces piece</div> <div class="col-3">1 piece</div> </div> </div> </div> 您可以通过 col 类使用以下解决方案： body { height:100vh; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid h-100"> <div class="row h-100"> <div class="flex-column h-100">side</div> <div class="col">1 piece</div> <div class="col-6">2 pieces piece</div> <div class="col">1 piece</div> </div> </div> 使用 w-* 类和 bootstrap flexbox 的另一种解决方案： body { height:100vh; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid h-100"> <div class="row h-100 d-flex flex-nowrap align-items-stretch"> <div class="flex-column h-100">side</div> <div class="w-25">1 piece</div> <div class="w-50">2 pieces piece</div> <div class="w-25">1 piece</div> </div> </div> 使用 Bootstrap v4 Flexbox： <div class="d-flex flex-row h-100"> <div class="d-flex justify-content-start">side menu</div> <div class="d-flex flex-row w-100"> <div class="w-25">1 piece</div> <div class="w-50">2 pieces piece</div> <div class="w-25">1 piece</div> </div> </div> 看来你可以在没有flex-column的情况下实现这一点。列的比例由 flex-grow-1 类决定，具体取决于可用/需要的空间量。 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div style="height: 175px;"> <div class="d-flex flex-grow-1 border border-primary m-1 h-100"> <div class="d-flex flex-grow-1 border border-secondary m-1"> <div class="border border-success m-1">  <div class="border border-warning m-1">1 piece</div> <div class="border border-info m-1">1 piece</div> <div class="border border-dark m-1">1 piece</div> </div>  <div class="d-flex flex-wrap flex-grow-1 border border-danger m-1"> <div class="flex-grow-1 border border-warning m-1">1 piece</div> <div class="flex-grow-1 border border-info m-1">2 pieces piece</div> <div class="flex-grow-1 border border-dark m-1">1 piece</div> <div/> <div/> <div/> <div>

css twitter-bootstrap flexbox bootstrap-4 twitter-bootstrap-4

回答 4 投票 0

在引导表日期选择器中输入日期时，它会立即删除

我在引导表中有一列是日期。我在该列上使用了过滤器。我有两种选择日期的方法。单击日历并直观地选择日期。或者输入它...

javascript jquery bootstrap-4 bootstrap-table

回答 1 投票 0

我怎样才能让这个boostrap5.3下拉菜单居中并占据页面的所有宽度？

我需要将下拉菜单设置为没有内容的页面，占据页面的所有宽度。我还需要将菜单的所有“lorem”链接放在导航栏中的中央。我……

javascript html css bootstrap-4 bootstrap-5

回答 1 投票 0

是否可以将bootstrap类转换为纯css？

我可以将引导类转换为纯CSS吗？比如将 'class="container-sm' 转换为普通 css。我想知道 bootst 中包含“container-sm”类的 CSS...