如何将按钮定位在 bootstrap 4 卡的底部?

Posted

技术标签:

【中文标题】如何将按钮定位在 bootstrap 4 卡的底部?【英文标题】:How to position button at the bottom of the boostrap 4 card? 【发布时间】:2021-08-02 04:26:27 【问题描述】:

是否可以在 boostrap 卡的垂直端放置按钮?卡片会自动填充空白以保持所有相同的高度,但是无论特定卡片的高度如何,如何在卡片的末尾放置一个按钮?

【问题讨论】:

【参考方案1】:

您可以简单地将按钮添加到卡片页脚(Bootstrap 中的卡片页脚类)并设置页脚背景颜色和边框的样式,使其在视觉上看起来像是卡片主体的一部分。 看一下这个: Codepen

.card 
  border-radius: 10px !important;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);


.card-header 
  border-radius: 10px 10px 0 0 !important;
  background-color: #FCCF23 !important;


.card-footer 
  border-radius: 0 0 10px 10px !important;
  background-color: white !important;
  border: 0 !important;


.card-footer p 
  display: none;


.card-footer button 
  color: #FCCF23;
  background-color: #52134B;
  font-weight: 500;
  border: 0;
  border-radius: 5px;
  padding: 8px 15px;
  transition: all .5s;

.card-footer button:hover 
  color: #52134B;
  background-color: #FCCF23;
  transition: all .5;  




/*delete the following codes to make footer totally invisible*/
.card-footer 
  border-top: dashed 2px rgba(0,0,0,.05) !important;

.card-footer p 
  display: block;
  color: rgba(0,0,0,.1);
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>


    <div class="card b-0 w-50 m-5 text-center">
      <h4 class="card-header border-0 p-4">I am a Bootstrap Card Header</h4>
      <p class="card-body p-4">I am a Bootstrap card Body. You can add as many texts as you want here, yet, the button will be remained at the bottom of the card!</p>
      <div class="card-footer pt-0 pb-4 px-4">
        <p class="my-2">I am an 'invisible' Bootstrap Card Footer</p>
        <button type="submit">hover me!</button>
      </div>
    </div>

【讨论】:

以上是关于如何将按钮定位在 bootstrap 4 卡的底部?的主要内容,如果未能解决你的问题,请参考以下文章

带有表单 POST 按钮的 Bootstrap 4 卡片 - 无法与卡片底部对齐

如何将按钮与页面底部对齐

如何定位 Bootstrap 弹出框?

如何在 bootstrap 4 卡的页脚顶部覆盖图标?

将底部元素定位在垂直中心

将插入符号定位在 Bootstrap 下拉按钮中