如何在bootstrap 4中将卡片按钮移动到底部？
在Bootstrap 4中，可以使用Flexbox布局来将卡片按钮移动到底部。以下是实现此效果的步骤：
- 创建一个包含卡片的HTML结构，确保已经引入了Bootstrap的CSS和JavaScript文件。
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Card content goes here.</p>
<button class="btn btn-primary mt-auto">Button</button>
</div>
</div>- 使用CSS样式将卡片的容器设置为Flex布局，并使用
align-items-end将按钮对齐到底部。
<style>
.card {
display: flex;
flex-direction: column;
height: 100%;
}
.card-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.mt-auto {
margin-top: auto;
}
</style>在上述代码中，.card类设置为display: flex;以启用Flex布局，并将flex-direction设置为column以垂直排列卡片内容。.card-body类设置为flex: 1 1 auto;以使其占据剩余的空间，并使用display: flex;和flex-direction: column;将按钮放置在卡片内容的底部。.mt-auto类用于将按钮的上外边距设置为auto，以将其推到底部。
这样，卡片按钮就会被移动到底部。
关于Bootstrap 4的更多信息和使用方法，可以参考腾讯云的相关产品和文档：
相关·内容
1回答
如何在bootstrap 4中将卡片按钮移动到底部？
css、bootstrap-4
我一直在试着把卡片按钮移到底部。我可以用空白键把它移到左边或右边，直到它没有问题地移出卡片为止，但当我试图把它移到底部时，卡片不知何故变长了。
浏览 22提问于2021-01-27得票数 0
1回答
如何在卡片末端垂直居中对齐项目(使用bootstrap 4)？
javascript、html、css、twitter-bootstrap、bootstrap-4
我有一个很长的bootstrap卡片，上面有两行信息，一个标题和一个描述。然后我想要一个按钮，对齐到这张卡的右侧，居中。我当前的按钮html如下所示： <div class="card card-body"> <p>The button should be central,align-self-end"
val
浏览 12提问于2020-04-30得票数 1
回答已采纳
1回答
Bootstrap:如何在等高列的底部对齐和居中按钮
html、css、bootstrap-4、multiple-columns
我有一个使用Bootstrap 4列(col-sm)的三列布局。请参阅codepen：https://codepen.io/anon/pen/EryRJL?editors=1100 我在每一列的段落中都有一些文本，并在段落下面有一个按钮。如何在列底部垂直对齐所有按钮，同时使它们在各自的列中居中？我可以把按钮按到最下面 .button-container { po
浏览 18提问于2019-01-29得票数 0
2回答
只在大屏幕上使用CSS引导类(卡片)
css、bootstrap-4
我在我的web应用程序中使用了一个引导4模板，其中包括一个卡片定义中的表单。我已经意识到，为了使它更便于移动(更好地使用空间)，卡片容器可能会被拿走。我本来打算消除所有形式的卡片类，但后来我意识到为更大的屏幕保留这样的设置将是很棒的。我想我可能会使用媒体查询之类的，但这些不是我的类，而是Bootstrap的--我不知道如何在“某些情况”中隐藏它们。通过css可以做到这一点吗？谢谢!
浏览 0提问于2018-12-08得票数 1
回答已采纳
2回答
垂直UIScrollView？
iphone、objective-c、ios、uiscrollview
我把UIScrollViews和pagingEnabled结合起来，给人的印象是卡片是分开的。但是，UIScrollView可以从左侧或右侧水平滑动对象。我希望我的卡片组在屏幕的中间，这样用户就可以从卡片组中刷卡，而不会看到卡片出现在左边或右边。此外，我还在考虑使用Touch方法( touchesBegan、touchesMoved等)。移动视图。但我担心我不能重现卡片的正确机制(摩擦力，当刷卡太短时的反弹效果等等)。
有没有人能给我指点合适的技巧或建议一些教程？我已经做了一些研究，但我
浏览 2提问于2012-02-21得票数 0
回答已采纳
1回答
我不确定这是否可行，但我希望在视口底部放置一个条，直到页脚滚动到视图中为止
bootstrap-4、css-position
我有一个栏，有一些按钮，它使用绝对和固定的定位“粘”到视窗的底部。我理解这一点(使用bootstrap 4)。我想要发生的是，当用户滚动页面，然后页脚进入视图时，按钮栏将与页脚一起向上移动，这样就不会模糊页脚。当用户向下滚动页面，页脚移出视图时，按钮栏将停留在视口的底部。
我该如何处理这个问题呢？
浏览 11提问于2020-02-20得票数 0
3回答
SPOJ“卡片技巧”：无法理解如何应用二进制索引树
algorithm、tree、segment-tree
它说
对于每个测试用例，输出一行值1到n的正确排列，空格分开。显示包顶卡的第一个数字，等…
示例
浏览 4提问于2014-09-02得票数 3
回答已采纳
3回答
Bootstrap img-响应导致超链接跨越整个列
twitter-bootstrap、twitter-bootstrap-3
: 5px; height: 125px; background-color: #ffffff; margin: 0 auto;" /> </div>如您所见，div跨越了所有12个Bootstrap列。以下是问题所在：
当你在浏览器中将鼠标悬停在图像上时，你会得到“手指”光标，正如你所期望的。但是，如果您将光标从图像上移开，向左或向右移动，但仍然在相同的Bootstrap<
浏览 14提问于2017-02-09得票数 0
回答已采纳
1回答
是否有任何简单的方法将按钮和标题放在一起，垂直对齐在Flask应用程序中网页的中心位置？
html、css、bootstrap-4、google-web-designer
我正在尝试对齐标题部分中定义的标题和按钮，这些标题和按钮都是在主体部分中定义的，它们对齐了网页的中心。是否有任何简单的方法将按钮和标题放在一起，垂直对齐在Flask应用程序中的网页中心？如何在Bootstrap4 ??中将页眉和按钮对齐到页面的中心
<h1 align="center">
浏览 3提问于2019-11-20得票数 3
1回答
底部物料界面对齐卡片按钮
css、reactjs、material-ui、react-flexbox-grid
我遇到的问题是试图将卡片按钮放置在底部(这个问题似乎在不同的框架中给互联网带来了垃圾邮件)。我在这里用-> 的卡
<
浏览 7提问于2018-10-06得票数 10
回答已采纳
2回答
在cols中引导相同高度的卡
css、twitter-bootstrap、twitter-bootstrap-3、flexbox
使用Bootstrap 3.3.6，我想做3张卡。<div class="row"> <div class="card"> </div> <
浏览 3提问于2016-07-15得票数 0
5回答
引导4分页缩放/响应
html、css、twitter-bootstrap、pagination、bootstrap-4
我正在使用引导4中的分页组件，如解释的。
我使用一
浏览 4提问于2018-05-02得票数 11
1回答
WIndows-10 UWP如何在相对面板中放置按钮相对于其他两个按钮
c#、windows-10、windows-10-universal、windows-10-mobile
我的应用程序有4个按钮，显示在屏幕底部。
</ControlTemplate> </Button>
通过指定
浏览 2提问于2016-05-06得票数 0
回答已采纳
6回答
TypeError：$(.).modal不是函数
jquery、twitter-bootstrap、twitter-bootstrap-3
modal-header"> <h4class="modal-title">Error</h4> <div class="
浏览 14提问于2015-09-01得票数 18
回答已采纳
2回答
我的datepicker的日历将在Card组件后面打开
css、reactjs、material-ui
我正在使用一个Shamsi Calendar，它位于我在Material UI中使用的<Card>的后面，我试着设置日历的z-index，并将整个内容放在一个div中，然后给它另一个z索引，当然也给了他们一个relative position，但仍然没有成功！我觉得这是与Material UI相关的东西，特别是因为Calendar组件被许多其他组件使用，它不应该有这么明显的错误，也许我在为组件提供样式时遗漏了一些东西？当我使用Material UI时，我必须改变我的方法
浏览 0提问于2019-07-21得票数 2
4回答
粘性HTML元素隐藏在chrome / Firefox移动浏览器的Mobile导航栏下面。怎么解决这个问题？[更新]
html、css、reactjs、mobile、sticky
要求:
width: 100vw; over
浏览 10提问于2022-07-01得票数 4
回答已采纳
5回答
你能连接Trello卡/板吗？
trello-cards、trello-boards
是否有可能让卡片连接起来？
例如，当一个功能成为一个传奇，因此卡片产生自己的“董事会”(可能在另一个组织-如果该功能是“外包”)，使该功能的较小的组成部分出现在上面。
浏览 0提问于2012-10-24得票数 27
2回答
代号1动画麻烦(也在纸牌演示中)？
java、android、ios、animation、codenameone
GridLayout顺序绘制的，而我希望动画(移动的)按钮能像纸牌游戏中的移动卡片一样画在最后/最上面。(并非所有移动都会播放。)
在iOS 9.2 (iPad 4)上，iOS 8.4 (iPhone 4)：-显示在汉堡菜单复选框中。-启动后，画面背景卡背跳转到容器/屏幕底部。-有时，在从牌到牌的动画中，最右边画面中的牌暂时面朝上，而已经面朝上的牌被翻过来面朝下。然而，最终的交易状态是正确的。-撤消/重做
浏览 0提问于2016-01-12得票数 4
1回答
如何在bootstrap 4中将移动视图导航栏的菜单内容显示到中心位置
html、css、bootstrap-4
我得到左对齐的文本时，在移动view.This是在bootstrap4中完成。如何在折叠时将菜单内容居中 ?
浏览 18提问于2020-06-25得票数 0
1回答
使用Internet Explorer时在Rails应用程序视图中显示的HTML标记
html、ruby-on-rails-3、internet-explorer
特别是，它在视图中将标记的一部分显示为文本(在页面底部)，而不是完整的标记，而是部分标记(如</h或</htm )。<!jQuery('#datatable').dataTable( {
"sDom": "<'row'<'span5'l><'span8'f>r>t<'row&#
浏览 2提问于2012-05-17得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
