Bootstrap -打印页面而不折断卡片
Bootstrap 是一个开源的前端框架，用于快速搭建响应式的网页和应用程序。它提供了一套丰富的CSS和JavaScript组件，可以轻松构建现代化的界面。
打印页面而不折断卡片是指在使用 Bootstrap 构建的页面中，当进行打印操作时，希望能够保持卡片（card）的完整性，而不被打印页面的边界所截断。
为了实现这个效果，可以使用 Bootstrap 提供的 d-print 类来控制打印时的显示与隐藏。将 d-print 类应用于卡片的父元素，即可在打印时仅显示卡片内容，而不显示其他的页面元素。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<style>
@media print {
.hide-on-print {
display: none !important;
}
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is some sample text.</p>
<a href="#" class="btn btn-primary hide-on-print">Print</a>
</div>
</div>
</div>
</body>
</html>在上述示例中，.hide-on-print 类被应用于打印按钮，这样在打印预览或实际打印页面时，按钮将被隐藏。而卡片的其他内容将会正常显示。
对于使用腾讯云的用户，可以考虑使用腾讯云的云服务器（CVM）和腾讯云对象存储（COS）等产品来搭建和存储网页及相关资源。这些产品提供了稳定可靠的基础设施和高效便捷的存储服务，可以满足网页开发和部署的需求。具体产品介绍和使用方式请参考腾讯云官方文档：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
相关·内容
1回答
我正在尝试使用window.print()打印一个简单的引导页面。这个页面看起来像这样(有多个div.col-md-12和卡片)： <div class="overview"> <!Lorel Ipsum text here --> </div> </div>
</div
浏览 21提问于2019-03-06得票数 2
回答已采纳
1回答
我正在使用php，并正在生成一个游戏锦标赛的球员身份证页面，可以打印出来。有没有办法确保在不同的计算机上正确打印卡片的大小，或者它们屏幕的分辨率设置是否会影响打印大小？
浏览 1提问于2012-12-24得票数 0
回答已采纳
1回答
我有一个有40张卡片的登录页面。每张卡被分配到一个类别/组(总共5个类别)。我想创建5个按钮，这样一旦按钮被点击，从特定的类别或类别的卡片是可见的。我不想用搜索栏。只有这5个按钮才能过滤这组卡片。我正在使用Bootstrap 4和Flask。我几乎找不到解决方案。其中之一是here，但它使用搜索栏而不是按钮。你能告诉我怎么做吗？
浏览 23提问于2021-09-23得票数 0
回答已采纳
我正在用bootstrap做一个简单的Django项目。我在一个页面上显示了一组卡片，这些卡片显示得很好(不要在意占位符图像)。 ? 我一直在阅读关于卡片的bootstrap docs，但由于我对CSS的了解比我想的要少，我想不出如何简单地改变卡片的大小，使它们更大，按行堆叠，而不是一列。 这是我用于此页面的HTML模板。它只是使用一个for循环来遍历我的项目，并为每个项目制作一张卡片。你可以看到我已经做好了标题和
浏览 15提问于2021-04-12得票数 0
回答已采纳
我已经创建了一个应用程序与AngularJS，其中有几张卡，我想打印。但是它只打印初始视图(带有滚动条)，而不是多个页面。我尝试使用window.print()，这是一个使用innnerHtml的自定义元素，以及这个角打印指令：
我有一个打印样式表，它显示纳克-重复中的其他卡片，这些卡片当时没有显示，并包括溢出:可见和高度
浏览 1提问于2015-11-04得票数 0
我正在开发一个闪存卡应用程序，我有一个FlipCard动画小工具，当我向左或向右滑动时，可以翻转卡片。但当我向上和向下滑动时，我正在尝试添加动画。我想让动画向上/向下滚动到下一个列表项，只滚动卡片(黄色框内)，而不是整个页面更改或不弹出到新页面。 我目前向上/向下滑动，下一个列表项出现，但我希望卡片的平滑动画滚动，而不是突然出现的文本。
浏览 18提问于2019-04-06得票数 0
我正在使用Twitter Bootstrap，并尝试打印带有背景的页面。我尝试了网页浏览器中的所有选项，但都不起作用。如果我不包括twitter bootstrap，背景的打印就能完美地工作。(顺便说一句，在这个特定的页面上，我没有使用任何与TBS相关的东西)。
有没有什么我可以做的使它在不排除TBS的情况下工作(一种复位)？
浏览 3提问于2013-04-02得票数 4
回答已采纳
我正在使用材料设计轻的“文本重”模板作为我正在创建的页面的基础。我想使用标签上的顶部链接到页面中的地方，而不隐藏其他内容：(向下滚动到一张卡片，不隐藏卡上下。)
如何才能做到这一点？
浏览 1提问于2015-09-21得票数 0
回答已采纳
每一个都将被打印到一个特定的大小(A4折叠在较长的边缘)理想情况下，我想打印卡片的列表，而不看他们的HTML。并且没有打印对话框，但需要一个模式确认对话框，在打印后，用户输入确认他们打印正确。
假设每一张卡都是div，我是否只是在css中旋转，然后在每张卡之后添加分页以定义打印的新页面？我是否需要指定
浏览 2提问于2012-06-28得票数 1
回答已采纳
我得到了简单的C#程序，它从数据库中读取数据，并生成简单的超文本标记语言报表页面。此页面使用以下样式表：....<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">在我将报告打印成PDF之前，它可以正常工作。在这种情况下
浏览 7提问于2017-01-24得票数 1
1回答
从其他部分构建PDF文件
、、、
它在一页上显示了四张相同的卡片，然后在下一页上显示了四张相同的卡片，依此类推。我想重新排列东西，使每一页只有一张卡片的副本，所以我可以打印四张不同的卡片到一页，而不是浪费大量的纸张。我想要某种命令行解决方案，它可以从每个页面中剪切一个不同的象限，然后将四个象限粘贴到一个新页面上。
浏览 4提问于2013-09-21得票数 3
回答已采纳
5回答
我有爱普生RX580多功能打印机，OpenOffice拒绝正确打印信封.我试过改变所有的设置，但是它一直在切断回信地址。有人找到解决办法了吗？我研究这件事是徒劳的.我不想仅仅为了打印一个信封而启动Windows！
浏览 0提问于2010-11-05得票数 6
1回答
当我预览/打印页面时，Bootstrap似乎在打印之前应用了-sm布局断点，并且我希望它至少使用-lg。所以，我的问题是:有没有办法手动设置在打印时浏览器将使用的视口宽度，而不必重写所有的CSS以在所有地方包含@media print异常？我在使用Bootstrap的页面上遇到过这个问题，但它仍然适用于其他框架，甚至是普通的媒体查询用法。
浏览 3提问于2018-06-16得票数 0
1回答
我有卡片头和卡片脚，他们工作得很好。在卡片的身体里我有一个卡片标题。此标题可在卡体中占用1或2行。在这个卡片的身体里，我也有一些信息。我想将这个信息div与卡片体底部对齐，因为我使用行/集来很好地对齐事物，但是因为1张卡片标题是1行，而另一张是2行，当你在页面中查看卡片时，这个附加信息并不完全在卡片之间排列，而底部对齐将解决我认为的问题所以基本上，我想让橙色的div在他们
浏览 0提问于2019-05-03得票数 0
回答已采纳
1回答
我正在用bootstrap开发ASP.NET网站。我想使用卡片列作为布局。我用阅读了教程。我的页面从CDN (而不是从本地文件夹)使用bootstrap。<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integri
浏览 14提问于2019-08-07得票数 0
回答已采纳
1回答
我正在构建一个应用程序，该应用程序根据用户单击的选项呈现一组卡片，我使用ajax对选项单击，这样卡片就不需要重新加载页面，但问题是我无法将卡片呈现到我的页面中，而是使用return render(request<div class="card-body"> <p>{{t}}</p></div>
只显示choose a date而</
浏览 4提问于2022-01-10得票数 1
回答已采纳
所以，我所做的就是用Bootstrap创建一张卡片，它下面有一张电影海报和它的名字。当我悬停在卡片上时，它会显示一个按钮。点击按钮，我想要的是它应该显示关于那部电影的信息。但是，我的问题是这是一张有按钮的卡片，而不是表格。
</div>{%结
浏览 1提问于2022-05-07得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
