如何制作一个带有箭头的溢流水平卡片？(使用Bootstrap 4.5)
要制作一个带有箭头的溢流水平卡片，可以使用Bootstrap 4.5的以下组件和类来实现：
- 使用
card类创建一个卡片容器，例如：
<div class="card">
<!-- 卡片内容 -->
</div>- 使用
card-body类创建卡片的主体内容区域，例如：
<div class="card">
<div class="card-body">
<!-- 卡片内容 -->
</div>
</div>- 使用
overflow-auto类将卡片主体内容区域设置为溢流自动，以便在内容超出容器时显示滚动条，例如：
<div class="card">
<div class="card-body overflow-auto">
<!-- 卡片内容 -->
</div>
</div>- 使用
position-relative类将卡片容器设置为相对定位，以便在卡片主体内容区域溢出时创建箭头，例如：
<div class="card position-relative">
<div class="card-body overflow-auto">
<!-- 卡片内容 -->
</div>
</div>- 使用
::after伪元素和border属性创建箭头，例如：
.card.position-relative::after {
content: "";
position: absolute;
top: 50%;
right: 0;
border: solid transparent;
border-width: 10px;
border-right-color: #000;
transform: translateY(-50%);
}通过以上步骤，你可以制作一个带有箭头的溢流水平卡片。根据具体需求，你可以进一步自定义卡片的样式和内容。
注意：以上答案中没有提及任何特定的云计算品牌商，如有需要，请自行根据实际情况选择适合的云计算服务提供商。
相关·内容
我有一个这样的代码片段(使用bootstrap)，它可以制作一个可以水平滚动的溢出卡。 </div></div> 可在此处查看现场演示：https://codepen.io/yehezkiel-g/pen/vYXbmxQ 现在的问题是，我想为导航设置左右箭头，如下图所示。顺
浏览 16提问于2021-01-18得票数 1
5回答
我正在尝试创建一个水平的卡片列表，其中一次显示3张卡片，其他的是水平滚动的，如下所示：使用CSS可以很容易地做到这一点，但我想使用Bootstrap来完成。是通过材料设计普及的，它们和Bootstrap中的任何其他东西一样易于使用。对于这个例子，它也可以是常规的div，而不是卡。我正在努力创建一个可
浏览 2提问于2016-03-15得票数 32
基本上我有一个可滚动的表格，在最后一列是一个省略号，它打开一个下拉列表，但因为表格是可滚动的，下拉列表被切断了。如果你看一下带有popper js的dropdowns的bootstrap's implementation，它们有一个你可以传递的边界选项。 现在看起来是这样的： ? 这是我到目前为止的代码： <template>
浏览 145提问于2020-12-08得票数 1
1回答
我正在制作一个facebook应用程序，为了跟上iframe中的facebook设计流程，我正在“复制”facebook的一些功能。我遇到麻烦的是带有箭头的悬停卡片弹出对话框，使用的是父背景图像。在图片中，我使用了2个具有相同位置属性的绝对div。第一层有一个透明的背景图像，带有一个反转<em
浏览 0提问于2013-02-24得票数 0
正如标题所述，如何在Eclipse中的任务窗口中一次显示100多个任务？或者，如何浏览超过100的任务？我的项目中有许多//TODOs的.c文件过滤器匹配158个项目中的100个
我想不出一种理智的方法能通过第100条.也就是说，我没有看到一个按钮，或者右击选项，意思是转到下一个我目前使用的疯狂方式是按不同的</em
浏览 4提问于2009-10-19得票数 31
回答已采纳
1回答
Div容器不适合内容我制作了一个带有主要组件的页面版本与您分享，并尝试解决此问题。嗯，问题是，当你水平展开页面时，图像在底部被剪切。我想像这样离开页面，因此没有视觉上的变化。附言:我正在使用bootstrap height: 100%; position:absolute;
}
浏览 1提问于2015-03-28得票数 0
与Bootstrap 4，我正在制作一个分类广告的水平卡片，并希望在标题的广告标题在左边，价格在右边。使用django模板： <section class="card"> <div class="col-sm
浏览 13提问于2020-08-08得票数 0
回答已采纳
我有一张用引导带5制作的卡片。基本上，我试图在卡片头的左边得到一个标题，在卡片标题的右边有一组按钮，所以这就是我所做的： <div class="float-start">我如何正确地使用Bootstrap 5来完成这个任务？
浏览 1提问于2022-01-11得票数 2
回答已采纳
我已经开发了一个iphone应用程序，它在Rootview中有6张卡片(带有图像的图标)。单击一张卡片将显示另一个放大图像的视图(fullScreen)。卡片视图有一个翻转按钮，它显示卡片的背面，其中包含一些文本。不同的卡片背面有不同的文本。根据文本大小，视图将是可滚动的。我使用了两个标签:一个是文本的
浏览 2提问于2010-08-23得票数 0
我使用的是Bootstrap 4，我在中等和更大的显示器上创建了一个3列的行，每个列的大小为4。每张卡片的内容可能大小不同，但我仍然希望每一张卡片的长度相等。我不使用卡片组/甲板，因为它们没有响应性，我希望卡片占据小/xs显示器上的所有12行。
下面是与卡片相关的代码片段。
浏览 0提问于2018-05-01得票数 8
回答已采纳
2回答
我正在尝试制作一个水平滚动的网页。这个模板使用J Query和CSS来控制宽度，但用户仍然必须在底部拖动滚动条-如何添加箭头或其他用户只需单击即可跳转到下一部分的内容？
浏览 0提问于2009-12-05得票数 0
我正在制作一个基础水平的游戏，如果我点击一张牌，一张图片就会显示出来。图片是随机选择的。到目前为止，我已经将随机图片分配给一张卡片，这些卡片是正面朝下显示的。因此，如果我单击卡片，我希望显示指定的图片(在字典中)。
我想知道如何检测我是否点击了(卡片的)图像，因为图像的x，y坐标在左上角。现在，我正在尝试找出一种方法来使用鼠标点
浏览 4提问于2013-05-19得票数 4
3回答
Hello everyBody我已经创建了一个slideShow (有左箭头和右箭头)，显示三组图像，图像水平对齐，每个图像都包含在一个带有链接(标题)的li元素中，如下所示：
<li><imagesrc="image_n.jpg"></image><a href="www.google.com">Google search engine</a>&l
浏览 2提问于2010-12-22得票数 0
回答已采纳
5回答
我从设计师那里得到的。一些不必要的信息被删除了。有人会建议我怎样才能准确地完成这个设计吗？从安卓布局设计的角度来看，我们需要一个VerticalScrollView/ListView，其中有很多HorizontalScrollView。因此，我们只能在HScrollview内部使用VScrollview。对我来说，这个布局中最难的东西是箭头(标记为红色)，如果有人能帮我做这个布局的任何方面，我将不胜感激。
浏览 8提问于2015-01-30得票数 0
我制作了以下图形：我想添加一个额外的箭头，指向从“远程回购”一直到“工作副本”(标签为"git拉“)，我希望这个箭头最好先稍微向下，然后左，然后向上。当我简单地向代码中添加一个箭头时，图形最终看起来如下所示：这是密码： /* set direction of graph to be left-->rightlr [label="git commit"];
lr
浏览 0提问于2016-10-26得票数 2
我已经在谷歌上搜索了一个星期了，我只是不知道如何将所有内容结合在一起：
$(document).bind('keydown',functi
浏览 0提问于2011-12-07得票数 4
我的任务是创建一个界面，就像Google一样，Store.There将是一个类别名称，后面是3或4张卡片(水平)，后面是更多的按钮。再来一次下一类。我已经使用嵌套垂直列表视图中的水平列表视图实现了这一点。
我知道，我可以通过使用带有水平方向的LinearLayoutManager的回收器视图来实现这一点。用这个我就只有一排了。我的</em
浏览 7提问于2015-02-13得票数 9
回答已采纳
我的网站使用ASP.Net Web，这限制了您只有一个带有runat="server"的表单，因此我已经将所有内容包装在一个表单标记中。现在，我正在使用Bootstrap 3，并希望使用对一些表单进行单独的样式设计。似乎要使用Bootstrap水平表单样式，我必须重新考虑如何在网站上使用表单，或者我必须在任何
浏览 2提问于2014-05-29得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
