问题标签 [bootstrap-cards]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - 如何使 Bootstrap 4 卡片在卡片列中具有相同的高度?
我正在使用 Bootstrap 4 alpha 2 并利用卡片。具体来说,我正在使用取自官方文档的这个示例。如何使所有卡片的高度相同?
我现在能想到的就是设置以下 CSS 规则:
但这只是一个硬编码的解决方案,在一般情况下不起作用。我认为的代码与文档中的代码相同,即:
bootstrap-4 - 过滤引导程序 4 卡
有没有人遇到过在 html 页面上过滤引导卡/结果并设置类以使其隐藏的脚本?
像这样:使用 jQuery 在 Bootstrap 4 中过滤卡片(不起作用)
我在桌子上使用了类似的东西,但它不适用于不同的 html。有任何想法吗?
像:https ://vestride.github.io/Shuffle/ 这样的脚本似乎太多了!
php - 分组引导卡
我试图在一些引导卡片上添加一个组,以便卡片首先显示数据,然后是相关卡片,例如:
2018 年 3 月 22 日
第一张牌 第二张牌
2018 年 3 月 23 日
第一张牌
目前我有这个,但这会连续显示我所有的卡片:
他们无论如何都要按日期分组吗?
这是我的每一行的PHP:
我的实际查询只是一个简单的 SELECT 语句:
bootstrap-4 - Bootstrap 4 卡片组中的固定数量的卡片
在 Bootstrap 4 中,我可以定义一个只有两张(或更少)连续卡片的卡片组吗?
例子:
第 1 次 + 第 2 次
第三+第四
第 5 次 + 第 6 次
7日
一行内的所有卡片应具有相同的高度。但是每一行都允许有不同的/单独的高度。
我检查了这两个相关的问题,但没有一个真正解决了我的需求:
html - 引导卡不向下移动
我正在尝试获得一些有关我的引导卡的帮助。我有 4 张卡片,它们在页面的整个宽度上水平延伸。在移动设备上访问网站时,它们仍然保持水平延伸,然后垂直延伸。我希望他们保持一个在另一个之上。帮助将不胜感激。谢谢。
图片:https ://imgur.com/a/W65324F
jquery - 在 .card-columns 内的卡片元素上使用 scale() 会剪切第一行的顶部
使用:引导 4.3.1 和 jQuery 3.4.1
.card-columns
我正在制作一个 Web 应用程序,它在容器内生成大量引导卡。当用户将鼠标悬停在卡片上时,它会被放大(使用 CSS transform: scale(1.1)
)以显示它已被选中。
问题是在第一行,卡片的顶部被切断,如下所示: https ://i.imgur.com/W97j2Rl.png
(有趣的是,第一个似乎很好)
我尝试了设置overflow: visible
,并尝试了不同的填充和边距设置,但没有奏效。
这是容器内卡片的代码:
正如我测试的那样,当使用 Chrome(在 Chrome 中截取的屏幕截图)、Edge 和 IE(都切断了卡的顶部和右侧)时会出现这个问题,但是 Firefox(开发版)做得很好,并且没有切断牌。
我还注意到,当卡片较少时,顶部出现在容器的底部: https ://i.imgur.com/8NJWV0Q.png
asp.net - 如何在引导 4 卡上添加边框
我是 bootstrap 的新手,我想将卡片添加到启动新 ASP.NET MVC 项目时搭建的默认索引页面
我的理解是引导程序在卡上包含一个边框。但是,当我运行应用程序时,卡片边框没有呈现。
当然,我搜索了网络,并在 SO 上找到了这两个相关问题: Bootstrap card not show like in examples What is the '.well' equivalent class in Bootstrap 4
我在我的项目中注意到它使用引导程序 V3 加载。使用 NuGet,我卸载了 v3 并安装了 Bootstrap V4。我确保在 Bundle.config 文件中也加载了正确的文件。尽管如此,边界没有被渲染。
这是我的 html 代码,它基于创建项目时生成的默认索引页面:
我更改的代码位于该行的第一列。(其他列中的省略号代表 Visual Studio 生成的代码)。我添加了边框类,但没有在 Chrome 中绘制边框。我也尝试过添加边框border-primary,但边框仍然没有呈现。
我完全希望看到卡周围有一个边框,但似乎无法让它工作。任何援助将不胜感激。
css - 如何将 Bootstrap 4 卡片标题文本垂直对齐到底部
我排列了四张 Bootstrap 4 卡,但其中一张卡的标题换成了第二行。我该如何编码,以便所有四张卡片标题都齐底?
我尝试将每张卡片的高度设置为某个像素高度,然后应用垂直对齐:底部,但这不起作用。
这是一个 Codepen:https ://codepen.io/Codewalker/pen/RXxaVM
html - 我希望我的卡片列表折叠成 2 列,标题重复
我正在生成一个"table"
使用引导卡,通过$smarty
. viewport
当表格变小时,我想将表格折叠成 2 列。
这样标题将在左侧,具有如下属性:姓名、日期、年龄。右边对应的列有一行数据,如:Fred, 12.12.2012, 41。
尝试使用引导卡中的内置响应功能,但是当它viewport
变小时,所有内容都会折叠成 1 列。顶部有标题。我试过jquery.basictable.min.js
了,但它不起作用。
所需结果的简单图形:
我将在此处提供一个链接以显示我想要实现的目标:http: //www.jerrylow.com/basictable/demo/
我认为 CSS 可以做很多我需要的事情,但我无法找到相关信息。