twitter-bootstrap 相关问题

Bootstrap 4 粘性顶部边距顶部

我有元素侧边栏和div，带有粘性顶部类： .... ... 我有元素侧边栏和 div 类 sticky-top: <div class="row"> <div class="col-lg-4"> <div class="sticky-top"> .... </div> </div> </div> 当侧边栏粘性时，我需要传递一个边距，因为类粘性顶部没有边距顶部。 侧边栏粘滞时如何书写边距？ 尝试： .sticky-top { top: 0.5em; } 您需要使用 top 而不是 margin-top <div class="row"> <div class="col-lg-4"> <div class="sticky-top" style="top: 30px"> .... </div> </div> </div> 尝试使用： .sticky-top{ margin-top:10px; } 如果它给你带来麻烦，你可以用!important强制它，就像这样： .sticky-top{ margin-top:10px !important; } 请注意，仅当其他解决方案不起作用时才应使用 !important。 希望有帮助！ 为了提高响应能力，您可以使用 [class*="sticky-"] { top: 1rem; } 以便它可以适用于所有响应式变体。即 sticky-md-top、sticky-lg-top 等

Bootstrap 导航栏品牌左边距不重要

我正在尝试像这样覆盖引导类导航栏品牌的左边距 .navbar .navbar-品牌{ 左边距：15px； 背景： url("../img/logo.png") 无重复； } 基本的东西正确...

如何更改引导滑块按钮颜色

如何更改引导滑块按钮颜色？ 如何更改引导滑块按钮颜色？ <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-lg-8 col-md-12 col-sm-12"> <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4> <div class="client-info d-flex my-5"> <div class="img rounded-circle mx-3"> <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt=""> </div> <div class="info"> <h5>Jenny Wilson</h5> <p>Vice President</p> </div> </div> </div> <div class="carousel-item active"> <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4> <div class="client-info d-flex my-5"> <div class="img rounded-circle mx-3"> <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt=""> </div> <div class="info"> <h5>Jenny Wilson</h5> <p>Vice President</p> </div> </div> </div> <div class="carousel-item active"> <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4> <div class="client-info d-flex my-5"> <div class="img rounded-circle mx-3"> <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt=""> </div> <div class="info"> <h5>Jenny Wilson</h5> <p>Vice President</p> </div> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script> 您可以创建如下规则： .carousel-control-prev-icon { color: blue; background-color: green; } .carousel-control-prev-icon { color: blue; background-color: green; } <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-lg-8 col-md-12 col-sm-12"> <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4> <div class="client-info d-flex my-5"> <div class="img rounded-circle mx-3"> <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt=""> </div> <div class="info"> <h5>Jenny Wilson</h5> <p>Vice President</p> </div> </div> </div> <div class="carousel-item active"> <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4> <div class="client-info d-flex my-5"> <div class="img rounded-circle mx-3"> <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt=""> </div> <div class="info"> <h5>Jenny Wilson</h5> <p>Vice President</p> </div> </div> </div> <div class="carousel-item active"> <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4> <div class="client-info d-flex my-5"> <div class="img rounded-circle mx-3"> <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt=""> </div> <div class="info"> <h5>Jenny Wilson</h5> <p>Vice President</p> </div> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>

如何在4级下拉菜单中添加滚动条[关闭]

我想在桌面模式下的第二个和第三个下拉菜单中添加更多选项，但列表太长。如何设置 y 轴滚动？ 演示 /* 导航栏 ===================================*/ nav.navbar.boo...

如何设置 Bootstrap 4 toast 的宽度？

我有一个带有 Bootstrap 4 toast 的页面，我将 toast 的位置设置为位置：固定。整个吐司部分如下所示： 我有一个带有 Bootstrap 4 toast 的页面，我将 toast 的位置设置为 postion: fixed。整个吐司部分是这样的： <div class="container mt-5"> <button type="button" class="btn btn-primary" id="liveToastBtn">Toast it</button> <div id="toastContainer" style="position: fixed; top: 1.5vw; right: 1vw; bottom: 4.5vw; z-index: 9;"> <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img src="..." class="rounded mr-2" alt="..."> <strong class="mr-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> </div> </div> 您可以在 this JSFiddle 中找到完整的工作代码。 该作品按原样工作得很好，但现在我想将 toast 的宽度设置为视口的 50% 左右。在 <div id="toastContainer"...> 行中，我尝试设置 width 属性： <div id="toastContainer" style="position: fixed; top: 1.5vw; width: 50%; right: 1vw; bottom: 4.5vw; z-index: 9;"> 或者我尝试设置left： <div id="toastContainer" style="position: fixed; top: 1.5vw; left: 50%; right: 1vw; bottom: 4.5vw; z-index: 9;"> 但在这两种情况下，出现的 toast 的 width 都不会改变（仅其水平 position）。 如何设置 Bootstrap 4 toast 的宽度？ 我找到了办法。它也有帮助，它在网站上，我可以直接在上面尝试东西，让事情变得更容易。 我不知道你是否熟悉 bootstrap 但是有这样的东西可以让你通过将 class="col-x" （x 在 1-12 之间）的东西放入 a 中来“控制”东西的长度div 与 class="row"。 <div class="row"> <button type="button" class="btn btn-primary col-8" id="liveToastBtn">Toast it</button> </div> 正如你所看到的，这就是我所做的，只需在按钮的类中添加 col-8 即可，你可以更改它，但我发现 6 看起来不像 50% 8 更接近。 然后你需要一些CSS来使按钮居中: .row{ display:flex; justify-content:center; } 希望这就是您正在寻找的🥶🥶🥶🥶🥶🥶

引导响应式表格内容包装

我有与此类似的 HTML： 公告 我有与此类似的 HTML： <div class="table-responsive"> <table class="table borderless"> <caption> <h3>Announcements</h3> </caption> <tbody> <tr > <td> If you are waiting for your certificate from your trainer, please contact them. Our turnaround time is between 1-2 months from the time we receive your details from your trainer, which we expect to be at the start of your program. The remainder is dependent upon how quickly your trainer has send in all the required paperwork and made payment, etc. </td> </tr> </tbody> </table> </div> 当我在小视口中查看输出时，表格会正确调整大小，但表格单元格中的段落内容不会换行，因此会显示滚动条。我预计响应行为会包裹段落内容。我该如何实现这一目标？ 只需简单地使用如下所示，它就会自动换行表格中的任何长文本。不需要别的 <td style="word-wrap: break-word;min-width: 160px;max-width: 160px;">long long comments</td> 因此您可以使用以下内容： td { white-space: normal !important; // To consider whitespace. } 如果这不起作用： td { white-space: normal !important; word-wrap: break-word; } table { table-layout: fixed; } 我遇到了与您相同的问题，但上述答案没有解决我的问题。我能够解决这个问题的唯一方法是创建一个类并使用特定的宽度来触发我的特定用例的包装。作为示例，我在下面提供了一个片段 - 但我发现您需要针对相关表格调整它 - 因为我通常根据布局使用多个 colspan。我认为 Bootstrap 失败的原因是因为它消除了包装约束以获得滚动条的完整表格。 colspan 一定是把它绊倒了。 <style> @media (max-width: 768px) { /* use the max to specify at each container level */ .specifictd { width:360px; /* adjust to desired wrapping */ display:table; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } } 我希望这有帮助 该行为是故意的： 通过将任何 .table 包装在 .table-responsive 中来创建响应式表格使它们在小型设备上水平滚动（768px 以下）。当查看宽度大于 768 像素的任何内容时，您不会在这些表格中看到任何差异。 这意味着表格默认是响应式的（正在调整其大小）。但前提是您希望在没有足够空间时不破坏表格线条并添加滚动条，请使用 .table-responsive 类。 如果您查看 bootstrap 的源代码，您会注意到有一个媒体查询仅在 XS 屏幕尺寸上激活，并将表格文本设置为 white-space: nowrap，这会导致其不会中断。 TL;博士;解决方案 只需从 html 代码中删除 .table-responsive 元素/类即可。 编辑 我认为你的桌子一开始没有响应的原因是你没有包装像这样的 .container、.row 和 .col-md-x 类 <div class="container"> <div class="row"> <div class="col-md-12"> <!-- or use any other number .col-md- --> <div class="table-responsive"> <div class="table"> </div> </div> </div> </div> </div> 有了这个，您仍然可以使用 <p> 标签，甚至使其响应。 请参阅 Bootply 示例此处 UberNeo 的回复是好的，我喜欢它，因为除了 TD 之外，你不需要修改任何其他内容。唯一的一点是，您还必须在样式中添加“white-space:normal”，以保持表格的响应特性，如果没有，在某些分辨率下，不会进行换行，表格也不会滚动出现。 style="word-wrap: break-word;min-width: 160px;max-width: 160px;white-space:normal;" .table td.abbreviation { max-width: 30px; } .table td.abbreviation p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } <table class="table"> <tr> <td class="abbreviation"><p>ABC DEF</p></td> </tr> </table> 那么好吧。您可以使用 CSS 自动换行属性。像这样的东西： td.test /* Give whatever class name you want */ { width:11em; /* Give whatever width you want */ word-wrap:break-word; } 在 css 外部文件中使用它。 .td-table { word-wrap: break-word; word-break: break-all; white-space: normal !important; text-align: justify; } 就这样做 style="word-wrap: break-word min-width:; max-width:;" 然后设置你想要的width 在 Bootstrap 5.0 中这样做： <td class="w-50 text-break">teeeeeeeeeeeeeeest</> 您可以根据文档使用w-25或其他东西 在 bootstrap 5 及以上版本中： 2024 年 3 月 5 日 下午 4:20 文字现在可以正常换行。 使用 table-responisve 类添加新类“tableresp”，然后在 js 文件中添加以下代码 $(".tableresp").on('click', '.dropdown-toggle', function(event) { if ($('.dropdown-menu').length) { var elm = $('.dropdown-menu'), docHeight = $(document).height(), docWidth = $(document).width(), btn_offset = $(this).offset(), btn_width = $(this).outerWidth(), btn_height = $(this).outerHeight(), elm_width = elm.outerWidth(), elm_height = elm.outerHeight(), table_offset = $(".tableresp").offset(), table_width = $(".tableresp").width(), table_height = $(".tableresp").height(), tableoffright = table_width + table_offset.left, tableoffbottom = table_height + table_offset.top, rem_tablewidth = docWidth - tableoffright, rem_tableheight = docHeight - tableoffbottom, elm_offsetleft = btn_offset.left, elm_offsetright = btn_offset.left + btn_width, elm_offsettop = btn_offset.top + btn_height, btn_offsetbottom = elm_offsettop, left_edge = (elm_offsetleft - table_offset.left) < elm_width, top_edge = btn_offset.top < elm_height, right_edge = (table_width - elm_offsetleft) < elm_width, bottom_edge = (tableoffbottom - btn_offsetbottom) < elm_height; console.log(tableoffbottom); console.log(btn_offsetbottom); console.log(bottom_edge); console.log((tableoffbottom - btn_offsetbottom) + "|| " + elm_height); var table_offset_bottom = docHeight - (table_offset.top + table_height); var touchTableBottom = (btn_offset.top + btn_height + (elm_height * 2)) - table_offset.top; var bottomedge = touchTableBottom > table_offset_bottom; if (left_edge) { $(this).addClass('left-edge'); } else { $('.dropdown-menu').removeClass('left-edge'); } if (bottom_edge) { $(this).parent().addClass('dropup'); } else { $(this).parent().removeClass('dropup'); } } }); var table_smallheight = $('.tableresp'), positioning = table_smallheight.parent(); if (table_smallheight.height() < 320) { positioning.addClass('positioning'); $('.tableresp .dropdown,.tableresp .adropup').css('position', 'static'); } else { positioning.removeClass('positioning'); $('.tableresp .dropdown,.tableresp .dropup').css('position', 'relative'); }

表格内的引导下拉列表不适用于 .table-responsive

这是现场示例的链接。 http://www.codeply.com/go/uBnL1bBs6v 从中您可以看到，当我将图层应用到...

我可以使用 bootstrap 来设计 HTML 电子邮件模板吗

我需要设计一个 HTML 电子邮件模板，通过电子邮件发送给我的客户。 我知道设计“html 电子邮件模板”： 不应链接任何 css 文件，所有样式应内联到

如何更改 Bootstrap 多选标签而不是全选？

我正在使用 Bootstrap Multiselect 下拉菜单。我们可以显示“所有选定的”文本，而不是点击“全选”选项时显示的项目数吗？ http://davidstutz.github.io/

如何将 Clipboard.js 2.0 与 Bootstrap 5.2 工具提示结合使用？

我正在尝试构建一个带有各种按钮的页面，这些按钮将文本复制到剪贴板，然后向用户反馈值已被复制。值不是来自用户输入，每个按钮的值是

Bootstrap 4 - 折叠外的导航栏项目

好吧，我不得不承认，即使在 BS3 中，我也一直在努力正确地工作。但我希望在折叠的容器外部保持持久的导航栏链接。 ...

Bootstrap：使用单个选项卡导航控制多个选项卡面板

我想用一个选项卡导航来控制两个不同的选项卡内容。 在 Bootstra 3 中，我有一个用逗号分隔数据目标的解决方案（如本例所示：https://stackoverflow.com/a/19719859/

如何根据TempData值打开模态

我需要根据控制器代码中确定的条件弹出模型警告框。我将警告消息加载到临时数据中，并尝试在文本存在时强制打开模式。 它不...

HTML Bootstrap - 显示两个按钮 50% 的 Div 宽度

我有一个模式窗口，需要在底部显示两个按钮，例如使用 Bootstrap 按钮进行“继续”和“取消”。 我希望这些按钮并排占据整个宽度...

如何根据引导卡中的宽度和高度调整图像？

我想在卡片中给出图像的宽度和高度（300px;300px;）： 我想在卡片中给出图像的宽度和高度（300px;300px;）： <!-- Card Start From Here --> <div class="card" style="width: 35rem;"> <img class="card-img-top" src="/demo/img/1.jpeg" alt="Card image cap" style="width:35rem;height:20rem;"/> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <!-- Card Start From Here --> 产量缩水了： 如果我删除下面的代码行，那么图像会很长但不会缩小： style="width:35rem;height:20rem;" 我已经尝试过： object-fit:cover;(Check all properties like fill, scale-down) 还尝试了一些CSS： <style> .clsAutofit{ height:300px; width:300px; } .clsImg{ max-width:100%; max-height:100%; } </style> <div class="clsAutofit"> <img src="/demo/img/1.jpeg" class="clsImg" /> </div> <!-- This also not working in card --> 我还尝试了一些属性： <style> img.one { display: block; object-fit: contain; max-width:500px; max-height:280px; width: auto; height: auto; } img.two { object-fit: contain; width: 535px;; height: 535px; } .box { width: 30%; height: 200px; border: 5px dashed #f7a239; } .containerTY { width: 60%; height: 500px; } .containerTYZ { max-width: 100%; } .thumbnail { width: 500px; height: 400px; } .img4R { width: 100%; height: auto; max-width: 50vw; } </style> 我尝试过，但还没成功。 任何想法或建议都欢迎。 你的方法没问题。问题是，引导类属性往往有!important。 因此将自定义 style.css 放在 bootstrap.css 下，这样它比 bs 具有更高的优先级， 然后使用： .my-image{ height : 300px !important; width: 300px !important } 将图像与类.my-image绑定，清除内联CSS样式，然后检查这一点。 .clsImg{ max-width:100%; width: 100%; height: auto; object-fit:cover; } 使用 img-fluid 表示图像，您还可以使用 w-25 w-50 w-100 表示 lg、md、sm 等设备 @media (min-width: 768px) { .w-md-50{width:50% !important;} } @media (min-width: 992px) { .w-lg-75{width:75% !important;} } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="container"> <div class="row pt-5 w-100 mx-auto"> <!-- Card Start From Here --> <div class="col-lg-4 col-md-6 col-sm-6 mb-4"> <div class="card p-4"> <div class="row"> <div class="col-6"> <img class="card-img-top img-fluid w-lg-75 w-md-50 w-100 text-center" src="https://i.ibb.co/Xyk1kJy/1-1.jpg" alt="Card image cap"/> </div> <div class="col-12"> <div class="card-body px-0 pb-0"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> <!-- Card Start From Here --> <div class="col-lg-4 col-md-6 col-sm-6 mb-4"> <div class="card p-4"> <div class="row"> <div class="col-6"> <img class="card-img-top img-fluid w-lg-75 w-md-50 w-100 text-center" src="https://i.ibb.co/Xyk1kJy/1-1.jpg" alt="Card image cap"/> </div> <div class="col-12"> <div class="card-body px-0 pb-0"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> <!-- Card end From Here --> <!-- Card Start From Here --> <div class="col-lg-4 col-md-6 col-sm-6 mb-4"> <div class="card p-4"> <div class="row"> <div class="col-6"> <img class="card-img-top img-fluid w-lg-75 w-md-50 w-100 text-center" src="https://i.ibb.co/Xyk1kJy/1-1.jpg" alt="Card image cap"/> </div> <div class="col-12"> <div class="card-body px-0 pb-0"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> <!-- Card end From Here --> </div> </div>

在 ASP.NET 应用程序中编辑/删除导航栏

有没有一种简单的方法可以编辑或删除使用 Twitter Bootstrap 的 ASP.NET 应用程序顶部的导航栏？ 需要删除“注册”和“登录”链接，并且“申请N...

primeng p-对话框样式覆盖

我有一个 p-dialog，当应用程序在 app.component.html 文件中加载时显示，如下所示。 当应用程序在 app.component.html 文件中加载时，我会显示一个 p 对话框，如下所示。 <div class="banner"> <p-dialog [(visible)]="displayBanner" [modal]="true" [style]="{width: '70vw'}" [baseZIndex]="10000" [showHeader]="false" [draggable]="false" [resizable]="false"> <banner (notify)="onNotify($event)"></banner> </p-dialog> </div> 这将显示应用程序横幅。当此对话框出现时，我必须将背景颜色覆盖为黑色。所以添加了如下CSS。 .p-dialog-mask.p-component-overlay { background-color: #000; } 关闭对话框后，我会看到每个页面的正常显示。页面内有几个删除功能，相应的 html 中有确认代码，如下所示。 <p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle"></p-confirmDialog> 此确认使用相同的 css .p-dialog-mask.p-component-overlay，因此这又将背景变为黑色。因此，我尝试通过在横幅页面的 p-dialog 中使用 styleClass : background-color: #000; 来删除背景颜色为黑色的 css，如下所示： <div class="banner"> <p-dialog [(visible)]="displayBanner" [modal]="true" [style]="{width: '70vw'}" styleClass="bgColorChange" [baseZIndex]="10000" [showHeader]="false" [draggable]="false" [resizable]="false"> <banner (notify)="onNotify($event)"></banner> </p-dialog> </div> 在CSS中如下： .bgColorChange { background-color: #000; } 但这并没有覆盖CSS，它看起来是正常的背景。 如何为 p-dialog 应用 2 种不同的样式？由于黑色背景仅出现在应用程序横幅中，该横幅在应用程序加载时显示，我想我应该应用于 p-dialog 标签，但它不会生效。 任何意见都将受到高度赞赏。 尝试 p-dialog ::ng-deep .bgColorChange { background-color: #000; }

如何让动态列表以网格方式水平显示

我想水平显示动态卡片列表。大屏幕为每行 3 x 3，小屏幕则为第 12 列。 我想水平显示动态卡片列表。大屏幕的每行尺寸为 3 x 3，小屏幕的尺寸为整列 12。 <ul class="list-group list-group-horizontal"> <li class="list-group-item">An item</li> <li class="list-group-item">A second item</li> <li class="list-group-item">A third item</li> </ul> 。每个列表项仍然是垂直的而不是水平的 <ion-grid> <ion-list class="ion-padding-top"> @for (item of myList; track item.userId) { <ion-row> <ion-card class="col-4"> <ion-avatar> <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" /> </ion-avatar> <ion-card-header> <ion-card-title>Card Title</ion-card-title> <ion-card-subtitle>Card Subtitle</ion-card-subtitle> </ion-card-header> <ion-card-content> Here's a small text description for the card content. Nothing more, nothing less. </ion-card-content> </ion-card> </ion-row> } } </ion-list> </ion-grid> 您可以使用离子网格使您的列响应： <ion-grid> <ion-row> <ion-col size-lg="3" size-md="3" size-sm="12" size="12"> // to make it responsive you can adjust these size values. <ion-card> //your card content here </ion-card> </ion-col> </ion-row> </ion-grid> 有关更多信息，您可以查看文档：Ion-Grid

有没有办法将 bootstrap 与 jquery 3.x 一起使用

我的网站上运行着 Bootstrap 3.3.6 和 jQuery 1.12.4。 随着 jQuery 3.0.0 发布到生产环境中，我将 jQuery 升级到了 jQuery-3.0.0.js。之后，当我运行我的网站时，我得到了这个控制台......

Bootstrap 4 从下拉按钮中删除插入符号

在 Bootstrap 3 中，您可以轻松地从下拉按钮中删除“插入符号”（向下的小箭头），但我不知道如何在 Bootstrap 4 中执行此操作，因为它们不再使用 在 Bootstrap 3 中，您可以轻松地从下拉按钮中删除“插入符号”（向下的小箭头），但我不知道如何在 Bootstrap 4 中执行此操作，因为它们不再使用 <span class="caret"></span>。 <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <input type="text" class="form-control" aria-label="Text input with dropdown button"> </div> 只需删除dropdown-toggle！ 这是一个例子： https://jsfiddle.net/ydnosrLw/ 它是用CSS完成的。做类似的事情： .dropdown-toggle:after { content: none } 您可以通过从元素中删除 dropdown-toggle 类来删除 Bootstrap 4 中的插入符号。所以代替这个： <button class="btn btn-outline-secondary dropdown-toggle" ...> 您的按钮将是 <button class="btn btn-outline-secondary" ...> 这不会有任何副作用，并且它仍然可以作为下拉菜单正常运行。 在 Bootstrap 4 中，您可以通过设置 $enable-caret sass 变量 false 来删除插入符号表单下拉按钮。但您必须在导入 bootstrap sass 文件之前设置此变量。 // Your variable overrides $enable-caret: false // Bootstrap and its default variables @import "node_modules/bootstrap/scss/bootstrap"; 我会在电话中正常使用下拉菜单，Apple rimane contornato di blu come se prende il contorno del bottone prima tu. 落下 行动 另一个动作 这里还有其他东西 questo è ili se qualcuno mi dà qualche suggerimento