开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在bootstrap 4中删除手风琴卡片标题中的底部页边距？

在Bootstrap 4中，要删除手风琴卡片标题中的底部页边距，可以通过自定义CSS样式来实现。以下是一种实现方法：

首先，在HTML文件的<head>标签内，引入Bootstrap样式表和自定义样式表：

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="your-custom-style.css">

在自定义样式表（your-custom-style.css）中，添加以下CSS规则：

.card-header {
  margin-bottom: 0; /* 删除卡片标题的底部页边距 */
}

这样，卡片标题中的底部页边距就会被删除。

在这个解决方案中，没有提及任何具体的云计算品牌商。如果你想了解更多关于Bootstrap 4的信息，可以参考腾讯云的文档和推荐链接：

Bootstrap 4官方文档：https://getbootstrap.com/docs/4.5/
腾讯云Web+托管服务：https://cloud.tencent.com/product/wec
腾讯云云服务器CVM：https://cloud.tencent.com/product/cvm

以上是一个完善且全面的答案，如果有其他问题需要解答，请随时告知。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【译】W3C WAI-ARIA最佳实践 -- 控件

手风琴是个垂直罗列的元素组合，例如标签或缩略图，这允许用户切换内容模块的展示。每个标签元素可以被用来展开折叠、暴露隐藏其相关内容。手风琴一般被用来减少页面滚动，当在单个页面中呈现很多内容模块时。

03

前端-10款web动画插件

今天分享的这款就是基于jQuery的瀑布流图片筛选插件，我们可以点击图片分类名称，即可将对应分类下的图片以瀑布流的方式展示出来，这款插件在筛选图片上使用还是比较方便的。

05

使用element-ui中table expand展开行控制显示隐藏（手风琴效果）

问题讲解：在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题，可以说饿了么团队在这个UI框架的文档撰写已经非常不错了，不过还是有一些方法乍一看让人摸不着头脑，有些table的常用功能示例代码提供的不是非常详细，所以这次针对这个可展开表格实现手风琴效果写一篇博客探讨一下。先展示一下ElementUI官方提供的示例代码效果图

03

使用 CSS Checkbox Hack 技术制作一个手风琴组件

在本篇文章里，我们一起学习下如何使用 CSS checkbox hack 技巧制作一个响应式的手风琴组件，这个组件完全基于CSS，没有JavaScript脚本，基于窗口大小进行水平和垂直之间进行切换。为了让大家更好理解，我将和大家一起一步步的进行完成。

03

腾讯面试官：如何从0到1实现一个高性能Collapse折叠组件，直到现在我还实现不出来

我们先从最基本的实现开始，然后逐步添加更多的功能，如手风琴模式、自定义箭头、禁用状态、隐藏时是否渲染DOM结构

02

【jQuery案例】手风琴

📷 🙋‍ 哈喽大家好，本次是jQuery案例练习系列第五期 ⭐本期是jQuery案例——手风琴 🏆系列专栏：jQuery笔记 😄笔者还是前端的菜鸟，还请大家多多指教呀~ 👍欢迎大佬指正，一起学习，一起加油！ ---- 文章目录案例展示案例分析案例实现 HTML CSS jQuery 方法一方法二总结 ---- 案例展示 https://live.csdn.net/v/embed/244227 哈喽大家好，本次案例将会实现一个简单的手风琴效果，当鼠标指针滑过方块时，当前方块状态会发生

02

10 个不错的 CSS 小技巧

CSS 大约有两百个属性。很多属性都是相互关联的，理清楚每一个属性细节是不可能的。所以，本文分享一些有用的 CSS 小技巧，方便开发者和设计师参考。

01

ASP.NET MVC使用Bootstrap系列（4）——使用JavaScript插件

序言 Bootstrap的JavaScript插件是以JQuery为基础，提供了全新的功能并且还可以扩展现有的Bootstrap组件。通过添加data attribute（data 属性）可以轻松的使用这些插件，当然你也可以使用编程方式的API来使用。为了使用Bootstrap插件，我们需要添加Bootstrap.js或者Bootstrap.min.js文件到项目中。这两个文件包含了所有的Bootstrap插件，推荐引用Bootstrap.min.js。当然你也可以包含指定的插件来定制化Bootstr

06

使用 CSS Checkbox Hack 技术纯手工撸一个手风琴组件

在本篇文章里，我们将一起学习下如何使用 CSS checkbox hack 技术纯手工撸一个响应式的手风琴组件，这个组件完全基于CSS，没有JavaScript脚本，同时又基于窗口大小进行水平和垂直之间进行样式切换。为了让大家更好理解本案例，我将和大家一起一步步的完成。

02

BootStrap基础知识

2019年实习时的 BootStrap(4.x)基础知识备份 BootStrap5六角学院文档： HexSchool 顺便推荐一个程序员段子网站 techug.com

01

开心档之bootstrap折叠

.collapse 类用于指定一个折叠元素 (实例中的 ; 点击按钮后会在隐藏与显示之间切换。

01

前端必备：五大css自动化生成网站（稀有级别！）

cssgr.id | An interactive CSS Grid code tool and generator

04

React Native实现手风琴折叠菜单效果

使用了各类手风琴组件，都出现了各类问题。而市面上手风琴效果的第三方组件又不是很多。最终使用的是ant design的手风琴效果，简单高效。

05

腾讯长鹅祝你中秋节快乐！

· 又是一年中秋佳节，婀娜多姿的“手风琴”长鹅来给大家送祝福了！长鹅代表了长长长长长的祝福，但愿人长久，千里共婵娟。 “手风琴”长鹅还现场演奏了一曲《明月几时有》，送给大家：文章来源：腾讯公众号

03

小程序-实现折叠面板-手风琴效果

无论是在小程序还是 h5 网页,折叠菜单,手风琴是一个非常常见的效果,如今也有很多现成的 UI 组件库已经实现了这一效果的,但有时候在写原生小程序时,单单就是一个折叠菜单效果,却要引入整个 UI 库,有点得不偿失

01

带你走近AngularJS - 体验指令实例

带你走近AngularJS系列：带你走近AngularJS - 基本功能介绍带你走近AngularJS - 体验指令实例带你走近AngularJS - 创建自定义指令 ------------------------------------------------------------------------------------------------ 之前我们已经介绍了所有的AngularJS 基础知识，下面让我们通过实例来加深记忆，体验自定义指令的乐趣。手风琴指令我们展示的第一个例子是手

05

给单元素艺术添加动画

原文：Animating Single Div Art 翻译：nzbin 导读：学习工具的最好的方法就是尝试新技术，本文通过“单元素艺术”介绍了 CSS 变量的使用以及给单元素添加动画的几种方法。通过学习作者编写的复杂的“单元素”示例，相信你对 CSS 变量以及 CSS 动画会有一个深刻的认识。如果你深入挖掘你的工具，你可以使用最基本的 HTML 做一些令人称奇的东西。我对 Lynn Fisher 以及其他人的“单元素艺术”（“Single Div Art”）印象深刻，所谓“单元素艺术”就是你可以使用一个

05

如何用Mockplus快速做一个手风琴菜单？

手风琴菜单是一种比较常用的菜单形式，利用原型工具来做这种菜单通常要用到中继器。即使是功能强大的Axure，想实现该效果也比较麻烦。但如果你对Mockplus有所了解，你一定知道，利用Mockplus的

04

我们为什么不使用CSS框架

在最近一次 ReactiveConf 会议上，Scott Tolinski 为这样一种观点做了辩护：考虑到 CSS 语言最近增加的东西，开发人员可能不再需要使用成熟的 CSS 框架。Tolinski 进一步演示了不需要支持 IE11 的开发人员如何利用 CSS 变量来实现一个自定义设计系统，而其开销明显小于使用框架。

01

分享 11 个非常有用的 HTML One-Liners 代码

英文 | https://javascript.plainenglish.io/11-html-one-liners-that-are-insanely-useful-3b62f4e57a06

02

Day16:小前端

EasyUI简介 easyui是一种基于jQuery的，角，Vue公司和阵营的用户界面插件集合。

02

使用这些 CSS 属性选择器来提高前端开发效率！

这样任何具有href属性的且没有更特定选择器的元素的文本颜色都会是红色的。属性选择器的特性与类相同。

05

SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题(六)

当前后端分离时，权限问题的处理也和我们传统的处理方式有一点差异。笔者前几天刚好在负责一个项目的权限管理模块，现在权限管理模块已经做完了，我想通过5-6篇文章，来介绍一下项目中遇到的问题以及我的解决方案，希望这个系列能够给小伙伴一些帮助。本系列文章并不是手把手的教程，主要介绍了核心思路并讲解了核心代码，完整的代码小伙伴们可以在GitHub上star并clone下来研究。另外，原本计划把项目跑起来放到网上供小伙伴们查看，但是之前买服务器为了省钱，内存只有512M，两个应用跑不起来(已经有一个V部落开源项目在运行

07

要提升前端布局能力，这些 CSS 属性需要学习下！

最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。

03

前端开发需要知道的一些 CSS 属性选择器！

这样任何具有href属性的且没有更特定选择器的元素的文本颜色都会是红色的。属性选择器的特性与类相同。

02

【CSS动效实战（纯CSS与JS动效）】03 精美手风琴侧边栏完整示例教程示例1

一般来说，侧边栏的位置是在左侧，咱们为了更好的展现侧边栏的效果，并且在本节中不涉及过多的内容，我们只需要直接给一个 div 宽度为 15即可，接着再到这个 div 中编写对应的侧边栏。

02

Layui 面板 panel

依赖于组件element layui-card layui-card-header layui-card-body

03

30个最优CSS动画案例分享，轻松让网页用户随心而“动”

CSS或CSS3动画，包括常见的鼠标悬停动画，网页加载动画，页面切换动画，文本动画以及背景动画等等，能够有效地提升网页趣味性和视觉吸引力。这也是为什么CSS/CSS3动画设计能够迅速蹿升为网页设计一大流行趋势的重要原因。

07

第62天：手风琴效果

手风琴效果： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>手风琴效果</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 } 12 div

02

新手学习web前端的基础知识内容有哪些

前几年，很多人看到IT行业越来越火，就想转行成为程序员。那时候转行还是很简单的，不一定要掌握很多技术知识，如果你是前端人员，甚至会写个静态页面就可以去应聘了。但现在，这样的“好事”越来越不好找了，很多毕业生面临着一毕业就失业的情况。然而，市面上饱和的大多数是初级的职位，对于中高级开发工程师，企业还是很欢迎的。

03

下拉菜单;手风琴;九宫格的Jquery的使用实例

下拉菜单;手风琴;九宫格的Jquery的使用实例 1.下拉菜单效果如图: 下拉.gif 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta

02

一些好用的jquery技巧

1、返回顶部按钮通过使用jQuery中的animate 和scrollTop 方法，不用插件就可以创建一个滚动到顶部的简单动画： // Back to top $('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); Back to top 改

06

JavaScript 手风琴效果

我们之前在 JavaScript 鼠标滑动，图片显示隐藏这篇博文中实现了一个简化版的手风琴效果，简而言之，手风琴效果能够帮助你，在有限的页面空间内，展示多个内容片段，使得用户能非常友好的实现多个内容片段之间的切换

03

如何设计下拉菜单（技巧+实例）

下拉菜单可以说是网页设计中令人又爱又恨的元素之一了。下拉菜单有许多优点：不占地方，不需要做输入验证，所有平台都支持，技术门槛低，用户都很熟悉其使用方法。然而与之同时，下拉菜单又是最容易被错误使用的表单组件。这篇文章就来告诉大家下拉菜单的适用场景、设计技巧以及一些漂亮的实例。

08

科学家研制出可处理胃部问题的胶囊机器人

仅在美国，每年就有3500例纽扣电池被误吞的报告。通常，纽扣电池能被消化掉，但如果它们进入了食道或者胃里长时间与食道或者胃的组织接触，它们将产生电流、电离出氢氧化物，这将会对器官组织产生极大的伤害。据美国麻省理工学院网站2016年5月12日报道，在模拟人的食道和胃的实验中，美国麻省理工学院、英国谢菲尔德大学和日本东京工业大学的研究人员已经研制出一种微小的折叠机器人，可以从进入人体的胶囊中将自己展开，并通过外部磁场进行操纵，从胃壁上爬过，取出被误吞下的纽扣电池或修补伤口。研究人员在2016年5月的“国际机

04

ExtJs学习笔记(11)_Absolute布局和Accordion布局

ExtJs其实在某种程度上可以代替div+css来进行页面布局(不过经测试，在最新的Firefox3下，部分功能好象有点问题)，今天我们来学习二种最基本的布局 1.Absolute 布局：这种最容易理解，直接用x,y值来绝对定位组件 2.Accordion布局：Accordion意为"手风琴"，即最终效果可以象手风琴那样拉来拉去，说白了，就是类似QQ面板的功能下面通过示例代码观察一下效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/

06

原生JS实现手风琴特效

今天给大家分享一个用原生JS实现的手风琴特效，效果如下：实现代码如下，欢迎大家复制粘贴。 <!DOCTYPE html> <html> <head lang="en"> <meta cha

01

【新手指南】App原型设计：如何快速实现这6种交互效果？

做App原型设计，那么页面切换、进度条、页面滚动、图片轮播，下拉菜单，搜索框这些交互效果必不可少。如何简单快速地实现这些效果呢？以下小编根据经验为大家提供了一些简单的设计方法，以供参考。

04

不负青春，砥砺前行，VueAdminWork—2.0与您继续同行，众多实用功能等您而来

hello~各们小伙伴们大家好，好长时间没有和大家见面了，最近也是一直忙着进行各版本的更新迭代，加上工作比较忙，所以最近一段时间没有及时更新文章，还请大家多多理解。

02

你听说过“风格指南驱动开发”吗？｜洞见

“今天，客户的UX又给我邮件了一版新的设计（PDF文件），改动不大，无非就是这个高度再调高点、那个宽度再调小些、这里用粗体、那边用18px的字体，可以参考以前做的手风琴组件的body部分，还有就是，顺便把手机版的样式截个图发过来？” 我：“能告诉我宽度和高度的具体值吗？那个手风琴组件可以在哪个页面找到？” 另一个开发告诉我：“先凭感觉做，然后再找UX面对面的按照要求一个个过。” 我：“好，面对面谈，总比邮件来回要快些。” UX答复我：”面对面谈可能没有时间，你能先做一个粗略的版本吗？我先看看，然后给你

05

周报

8.js中利用document.body.scrollTop 和 document.documentElement.scrollTop记录滚动条的位置

04

uView 折叠面板显示，绑定默认显示

u-collapse-item open属性默认为单个数据，直接使用：open=“index”,会使面板变成手风琴效果

01

Web前端开发初级中级实操

这是某电商类网站服装商品展示页面局部，该网站正在促销秋冬季女装。现在我们需要编写该网站效果图部分代码。

02

高颜值在线绘图平台ImageGP系列教程 - 参数介绍

第一部分是轮播图，展现每个工具能产生的代表性图、示例数据和参数；给定符合格式的数据、设置指定的参数，即可获得右侧的可视化结果。

04

手拉手JavaFX布局

Flowpane是一个容器。它在一行上排列连续的子组件，并且如果当前行填充满了以后，则自动将子组件向下推到一行

00

jQuery笔记(2)

切换上拉下拉: slideToggle([speed,[easing],[fn]])

01

13个帮你提高开发效率的现代CSS框架[每日前端夜话0x67]

本文将向你介绍一系列顶级CSS框架。有些人可能听说过，也可能对有些人是全新的。但它们都提供了各种有用的先进功能，可以改善你的工作流程。开始吧！

04

精读《不再需要 JS 做的 5 件事》

关注 JS 太久，会养成任何功能都用 JS 实现的习惯，而忘记了 HTML 与 CSS 也具备一定的功能特征。其实有些功能用 JS 实现吃力不讨好，我们要综合使用技术工具，而不是只依赖 JS。

02

记一个“奇葩”需求的实现

1、前言我们这边没有专门的产品经理，UI对产品的设计基本具有决定权，说实话，是有那么一点可怖的（前后改了很多次，差一点就改回原版了，我自己都觉得不好意思了🤣）。 🤔有没有一种可能：我们UI体验过的产品少，缺少对产品以及用户行为的认识。设计出来的东西看似很华丽，其实缺失很多场景下的分析，不切合实际，这也正是产品经理需要做的工作之一。大多数人说的“用户体验”或许只是主观的、想当然的（俺也一样😮）。自从接触互联网开始我就在有意的学习怎么做产品，期间还考虑过转产品，永远不要拿业余的跟专业的比，没什么可比性，不成

01

layui表格套模块（表格）

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

08

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

热门标签

活动推荐

运营活动

活动名称

广告关闭