twitter-bootstrap-3 相关问题

引导响应式表格内容包装

我有与此类似的 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 从中您可以看到，当我将图层应用到...

模板中的 Django 使用 if 标签将一个变量与数字进行比较总是给出 false

我首先使用 widthratio 标签来计算比率百分比数字并将其分配给名为 Ratio 的变量 然后，当我尝试将它与 if 和 elif 标记中的整数进行比较时，if 和 elif 标记似乎......

将最小弹性框高度设置为内容的高度

当我调整窗口大小时，元素可能会突出其父元素。 有什么方法可以保证： .split-content 最小高度等于其内容 + m... 当我调整窗口大小时，<input>元素可能会突出其父级<div>。 有什么方法可以保证： .split-content最小高度等于内容+边距 .split-heading 与 .split-content 具有相同的高度 我有以下标记： .split { display: flex; align-items: center; justify-content: center; height: 100%; } .split-heading { border-radius: 8px 0 0 8px; min-width: 3em; } .split-content { flex-grow: 1; flex-direction: column; align-items: flex-start; border-radius: 0 8px 8px 0; padding: 0 2rem; background: #ecf0f1; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div style="position:absolute; top:15px; right:15px; bottom:15px; left:15px"> <div style="display:flex; flex-direction:column; height:100%; width:100%"> <div style="position:relative; flex:1; width:100%; height:100%;"> <div style="position:absolute; top:0; right:0; bottom:0; left:0"> <!-- from here onwards i can change stuff the upper part comes from the framework --> <div class="split split-container "> <div class="split split-heading bg-primary"> <h2> 1 </h2> </div> <div class="split split-content"> <h3>Heading</h3> <input type="text" class="form-control" placeholder="..." readonly="TRUE"> </div> </div> </div> </div> </div> </div> 只需使用网格而不是弹性 .split { display: grid; grid-template-columns: 3em 1fr; align-items: center; justify-content: center; height: 100%; } .split-heading { border-radius: 8px 0 0 8px; display: flex; align-items: center; justify-content: center; } .split-content { display: flex; flex-grow: 1; flex-direction: column; align-items: flex-start; border-radius: 0 8px 8px 0; padding: 0 2rem; background: #ecf0f1; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div style="position:absolute; top:15px; right:15px; bottom:15px; left:15px"> <div style="display:flex; flex-direction:column; height:100%; width:100%"> <div style="position:relative; flex:1; width:100%; height:100%;"> <div style="position:absolute; top:0; right:0; bottom:0; left:0"> <!-- from here onwards i can change stuff the upper part comes from the framework --> <div class="split split-container "> <div class="split split-heading bg-primary"> <h2> 1 </h2> </div> <div class="split split-content"> <h3>Heading</h3> <input type="text" class="form-control" placeholder="..." readonly="TRUE"> </div> </div> </div> </div> </div> </div>

Bootstrap 响应式表格在 iOS 设备上无法水平滚动

我有一个带有以下标记的表格： 正如文件...

Bootstrap：左对齐按钮文本

如何在引导按钮内将文本左对齐？我有多个带有不同长度文本的按钮，并且所有按钮都需要具有相同的宽度。我已经使用类 col 实现了这一目标...

引导日期时间选择器无法运行

我正在尝试优秀的 Bootstrap DateTimePicker 插件，但似乎一开始就遇到了缓冲区。页面控件显示正确，但日历按钮完全

Twitter Bootstrap 3 中导航栏中的元素如何垂直居中？

我正在查看 Twitter Bootstrap 中的导航栏元素，看看它们如何将导航栏中的元素垂直居中，因为这是我一直在努力解决的问题。 我总是...

Angular 未加载引导程序

我对 Angular 相当陌生，正在尝试在项目中实现引导程序。但我无法将引导程序加载到我的项目中 当我查看检查工具 --> 来源 --> CSS 时 /* src/sty...

Bootstrap 3：当另一个下拉菜单打开时，悬停时打开下拉菜单

我有几个 Bootstrap 3（由于我无法控制的原因必须使用它）导航栏中的下拉菜单，我希望它们表现得像应用程序菜单。通常，下拉菜单会在单击时打开，...

如何用光标在 <button> 元素中选择文本？

我发现了一个奇怪的行为，我无法在 元素中选择文本。例如，请尝试在 Bootstrap 的这些按钮中选择文本：http://getbootstrap.com/components/#list-gr... 我发现了一个奇怪的行为，我无法在 <button> 元素中选择文本。例如，请尝试在 Bootstrap 的这些按钮中选择文本：http://getbootstrap.com/components/#list-group-buttons 这是一些标准行为还是可以编辑？我需要选择按钮中的文本。 您可以做这个问题的相反操作： 创建以下 CSS3： .list-group-item{ -webkit-touch-callout: text; -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } 并链接样式表。它适用于我的火狐浏览器。 编辑：将“全部”更改为“文本”，正如 Nenad Vracar 所说。现在它可以在 Chrome 和 Firefox 中运行 可以设置user-select: text button { -webkit-user-select: text; /* Chrome all / Safari all */ -moz-user-select: text; /* Firefox all */ -ms-user-select: text; /* IE 10+ */ user-select: text; } <div class="col-sm-4"> <div class="list-group"> <button type="button" class="list-group-item">Cras justo odio</button> <button type="button" class="list-group-item">Dapibus ac facilisis in</button> <button type="button" class="list-group-item">Morbi leo risus</button> <button type="button" class="list-group-item">Porta ac consectetur ac</button> <button type="button" class="list-group-item">Vestibulum at eros</button> </div> </div> 小提琴 以上答案均不适用于 Safari。如果该按钮仅用于显示，并且您同意它不再发送 onClick 事件，则可以使用 pointer-events: none 使其在 Safari 中正常工作。 button { -webkit-user-select: text; /* Chrome */ -moz-user-select: text; /* Firefox */ -ms-user-select: text; /* IE 10+ */ user-select: text; pointer-events: none; /* Safari */ } 您可以像这样为按钮定义 css 属性 对于按钮类添加光标：指针属性。 您可以直接指定按钮或自定义 CSS 类 光标：指针

如何创建双色导航栏？

我目前正在开发一个网站，我需要一个宽导航栏，其中只有三个链接/“按钮”。问题是所有所谓的按钮都是不同颜色的（附有

通过 JavaScript 使用虚线参数添加表格标签

我正在尝试使用 Javascript 添加 Bootstrap Table 表标签。表标签的参数之一是数据分页。这种添加方法由于 - 而失败。 我该如何解决...

如何隐藏默认选择文件按钮

如何隐藏默认的选择文件按钮？ 这是我的html： 如何隐藏默认的选择文件按钮？ 这是我的html： <div class="col-md-4"> <span class="btn btn-info "><i class="glyphicon glyphicon-plus"> </i> Browse <input type="file" style="position:relative;overflow:hidden" id="inPutArtistImage" name="ArtistImage" accept="image/png, image/jpeg" /> </span> </div> 该按钮的样式很好，带有引导按钮信息颜色和加号图标。 我根本无法摆脱灰色的“选择文件”按钮。 如有任何帮助，我们将不胜感激。 我已经尝试了 StackOverflow 上的所有解决方案 2021 年更新 你可以使用 ::-webkit-file-upload-button { display: none; } 我找到了另一个即使在非 WebKit 浏览器中也能工作的解决方案 ::file-selector-button { display: none; } 它隐藏了“选择文件”按钮，但文件名仍然可见。 如果您还想隐藏文件名，只需使用 input 定位整个 display:none 简单。给input足够的padding-top，让它隐藏起来。 不要忘记做box-sizing的事情!! input#file { display: inline-block; width: 100%; padding: 120px 0 0 0; height: 100px; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698394-icon-130-cloud-upload-512.png') center center no-repeat #e4e4e4; border-radius: 20px; background-size: 60px 60px; } <form> <input id="file" type="file" /> </form> 这可能是您正在寻找的东西 小提琴 我在这里所做的是使用 display: none 样式隐藏原始输入，并在另一个 div 上使用 jQuery click() 来模拟输入上的点击。 注意： 我使用 split('\\') 来转义 \，因为它用在从文件选择器返回的 fakepath 中。 通过 Stackoverflow 和其他教程寻找几个答案，我最终做了这段代码： $('#selectedFile').change(function () { var a = $('#selectedFile').val().toString().split('\\'); $('#fakeInput').val(a[a.length -1]); }); input#fakeInput { width: 100%; background-color: #f8f8f8; border-radius: 8px; display:block; padding: 11px 0; box-sizing: border-box; border:initial; height: 3em; } #buttonImage { float: right; position: absolute; right: 0; top: 0; background: #02a39c; padding:10px; color: white; font-weight: bold; border-radius: 0px 8px 8px 0px; height:1.25em; } #fakeDiv { width: 500px; position: relative; display: inline-block; } #selectedFile { opacity:0; position:absolute; left: 0; top: 0; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="fakeDiv"> <input type="file" id="selectedFile" /> <input type="text" id="fakeInput" /> <span onclick="document.getElementById('selectedFile').click();" id="buttonImage" >Browse</span> </div> 基本上，你必须以一种棘手的方式来做。 创建一个input type="file"，使其不可见（带有opacity或visibility属性，如果设置display=none，则不起作用）。 输入常规内容并根据需要设置格式 放置一个假按钮（在我的例子中是一个跨度） 单击按钮以启动 input type="file" 单击 只需用您通过不可见的输入文件上传的内容填写常规输入即可 注意：如果代码片段不起作用（我第一次发布代码片段），请尝试this JsFiddle。 在寻找一个简单的 CSS 解决方案时发现了这个。只需在链接的 css 文件中使用以下代码即可： input[type=file]::file-selector-button { visibility: hidden; } 归功于 Nikita Hlopov，https://nikitahl.com/custom-styled-input-type-file 在你的CSS中： input[type="file"] { display: none !important; !important 不是必需的。

无边框引导表格

尝试显示无边框的引导表。 当我删除（bootstrap.min.css）时，我可以隐藏边框，但是当添加它时，无法隐藏边框 尝试显示无边框的引导表。 当我删除（bootstrap.min.css）时，我可以隐藏边框，但是当添加它时，无法隐藏边框 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <div class="container"> <form action="" method="POST"> <div class="mb-3" style="width:100%;"> <input class=" form-control fromDT" style="width:100%;" type="date" name="fromDT" style="" id="fromDT" value="22-2-2022" /> <input class=" form-control toDT" type="date" name="toDT" style="" id="toDT" value="11-1-2000" /> <input type="submit" id="btn-save" class="btn btn-danger form-control btn-save" style="" value="Submit" name="SEARCH"> </div> </form> <br><br><br> <div class="table-responsive"> <table class="table table-borderless" border="0" cellspacing="0" cellpadding="0"> <tr> <th class="not_mapped_style" style="line-height:0; text-align:center">ID</th> <th class="not_mapped_style" style="line-height:0; text-align:center">date</th> <th class="not_mapped_style" style="line-height:0; text-align:center">ref </th> <th class="not_mapped_style" style="line-height:0; text-align:center">amount</th> <th class="not_mapped_style" style="line-height:0; text-align:center">income</th> <th class="not_mapped_style" style="line-height:0; text-align:center">Balance</th> </tr> <tr> <td style="line-height:0; text-align:center"><b>433</b></td> <td style="line-height:0; text-align:center">22-2-2022</td> <td style="line-height:0; text-align:center">44332</td> <td style="line-height:0; text-align:center">443</td> <td style="line-height:0; text-align:center">1111</td> <td style="line-height:0; text-align:center">899989</td> </tr> <tr> <td style="line-height:0; text-align:center">100</td> <td style="line-height:0; text-align:center">22-2-2024</td> <td style="line-height:0; text-align:center">4333</td> <td style="line-height:0; text-align:center">400$</td> <td style="line-height:0; text-align:center">0</td> <td style="line-height:0; text-align:center">1600$</td> </tr> <tr> <td style="line-height:0; text-align:center">100</td> <td style="line-height:0; text-align:center">22-2-2024</td> <td style="line-height:0; text-align:center">4333</td> <td style="line-height:0; text-align:center">400$</td> <td style="line-height:0; text-align:center">0</td> <td style="line-height:0; text-align:center">1600$</td> </tr> </div> 解决了... 我使用了这个CSS代码 <style> .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { padding: 8px; line-height: 1.42857143; vertical-align: top; border-top: 1px solid rgba(221, 221, 221, 0)!important; } .table>thead>tr>th { vertical-align: bottom; border-bottom: 2px solid rgba(221, 221, 221, 0)!important; } </style>

Bootstrap3 下拉开关

我想开发仅适用于移动屏幕尺寸的内联网Web应用程序，我不需要响应式设计技术。 我想在右上角有一个切换按钮，按下它时...

身体高度比屏幕高度大100%

我已将 html body 标记高度设置为 100%，但在 Firefox 中显示的像素比屏幕多一些，因此会出现导航滚动条。除了指定任意值之外，我该如何调整？

bootstrap 3 datepicker禁用像预订表格这样的分钟

我想在预订表格中使用 bootstrap 3 日期选择器。我找到了如何禁用日期（月/日/年），但我无法禁用时间。 ... 我想在预订表格中使用bootstrap 3 datepicker。我找到了如何禁用日期（月/日/年），但我无法禁用时间。 <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='datetimepicker5'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker5').datetimepicker({ defaultDate: "11/1/2013", disabledDates: [ moment("12/25/2013"), new Date(2013, 11 - 1, 21), "11/22/2013 00:53" ] }); }); </script> </div> </div> 我只想禁用 11/22/2013 00:53 而不是全天 11/22/2013。 我还看到了这个示例，它禁用了 00 分钟，但如果您选择 16:00，则无法将其更改为 16:15。 有人可以帮助我吗？ 我不完全明白你需要什么。根据我得到的信息，你想改变分钟，但以步骤（5,10,15）为单位。为此，您可以使用您传递的链接的类似方法，但无需禁用步骤选择器。 $('.datetimepicker').datetimepicker({ format: 'DD/MM/YY - HH:mm' }).on('dp.show', function () { $('a.btn[data-action="incrementMinutes"], a.btn[data-action="decrementMinutes"]').removeAttr('data-action').attr('disabled', true); }); 笔 但是如果您不想显示分钟，只显示小时，您可以简单地更改时间选择器的格式。并且可以使用 moment.js 中的一些命名约定。如果您的格式类似于“DD/MM/YY - HH”，它只会显示小时。 该解决方案的缺点是选择器变得很奇怪，并且您无法真正知道自己在选择什么。因此，您在链接上提供的解决方案是仅选择时间的最佳方法。 经过很长一段时间后，我不得不在现有项目上使用引导日期时间选择器。所以我找到了stepping选项 stepping: 15 所以这里是 <script type="text/javascript"> $(function () { $('#datetimepicker5').datetimepicker({ defaultDate: one_month, minDate: new Date(), format: 'DD/MM/YYYY HH:mm', stepping: 15 }); }); </script>

如何更改 Bootstrap 导航栏的背景颜色

我正在尝试更改 Bootstrap 中编码的导航栏的颜色。到目前为止，已经内置了应用于导航栏的 Bootstrap 类来更改背景颜色和锚点链接...

如何在引导卡上添加关闭按钮？

我有一张使用以下代码的引导卡： 我有一张使用以下代码的引导卡： <div class="card card-outline-danger text-center"> <span class="pull-right clickable" data-effect="fadeOut"><i class="fa fa-times"></i></span> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> 我使用以下代码来使关闭按钮正常工作： <span class="pull-right clickable" data-effect="fadeOut"><i class="fa fa-times"></i></span> 关闭按钮不起作用，我是引导程序新手。因此，我需要一些帮助。 这不是bootstrap的标准功能，所以你需要给图标绑定一个JS点击事件，并触发它来关闭父级.card。我还在图标中添加了 cursor: pointer，使其看起来像可以单击的东西。 $('.close-icon').on('click',function() { $(this).closest('.card').fadeOut(); }) .close-icon { cursor: pointer; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="card card-outline-danger text-center"> <span class="pull-right clickable close-icon" data-effect="fadeOut"><i class="fa fa-times"></i></span> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> 好吧，自从提出这个问题以来已经过去了一段时间，但仍然是实现可关闭卡片的好方法，无需任何自定义 JavaScript，仅使用 Bootstrap CSS 类，如下所示：card-header、Bootstrap 4 关闭图标的组合和 .mt-n5 上的负边距（此处为 card-body）。关闭图标很好地定位在卡片标题内，负边距将卡片内容拉近标题区域。 <div class="container"> <div id="closeablecard" class="card card-hover-shadow mt-4"> <div class="card-header bg-transparent border-bottom-0"> <button data-dismiss="alert" data-target="#closeablecard" type="button" class="close" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="card-body mt-n5"> <h5 class="card-title">Your Title</h5> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem recusandae voluptate porro suscipit numquam distinctio ut. Qui vitae, ut non inventore necessitatibus quae doloribus rerum, quaerat commodi, nemo perferendis ab. </p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> </div> 要实际关闭卡片，我们可以使用 BS4 Data-API 并将以下数据属性放入按钮标签中：data-dismiss="alert" data-target="#closeablecard"。 data-target 是我们卡的 ID，data-dismiss=alert 会触发 Bootstrap 中的实际关闭事件。 查看 JSFiddle 上的演示... HTH， 汉森 要真正关闭卡片，我们可以使用 BS4 Data-API 并将以下数据属性放入按钮标签中：data-dismiss="alert" data-target="#closeablecard"。 data-target 是我们卡的 ID，data-dismiss=alert 会触发 Bootstrap 中的实际关闭事件。 通过， 拉古尔·K