布尔玛卡片的 CSS 样式

Posted 2023-03-28

【中文标题】布尔玛卡片的 CSS 样式

【英文标题】：css styling with bulma cards

【发布时间】：2020-12-01 21:55:06

【问题描述】：

我确实有以下 html 输出：

所以，您可以看到页脚不匹配...

我的 css 组件如下所示：

.card-equal-height 
  display: flex;
  flex-direction: column;
  height: 100%;


.card-equal-height
.card-footer 
  margin-top: auto;
  height: 100%;

.card-equal-height.card-footer 这部分无法正常工作。我希望页脚与订单卡匹配，无论描述有多长。

html:

<div [ngClass]="'card-highlight': product.listItemHovered" class="card card-equal-height"
                 (mouseenter)="hoverListItem(product)"
                 (mouseleave)="hoverListItem(product)"
                 (click)="test(product)">
      <div class="card-image">
        <figure class="image is-square">
          <img [src]="product.imageURL" >
        </figure>
      </div>
      <div class="card-content">
        <p class="title has-text-centered"> product.title</p>
        <p class="subtitle">product.price | currency: "USD"</p>
      </div>
      <div class="card-footer">
        <p class="card-footer-item">
          <button (click)="removeFromCart(product); showRemoved()"
                  class="button is-danger is-outlined is-pulled-left is-small"> Remove
          </button>
        </p>
        <p class="card-footer-item">
          <button (click)="addToCart(product);showAdded()"
                  class="button is-outlined is-primary is-pulled-right is-small"> Add to Cart
          </button>
        </p>
      </div>
</div>

【参考方案1】：

我认为您可以使用 flex-grow 来实现更改“卡片内容”的高度（忘记更改 .card-footer）

.card-equal-height
.card-content 
  flex-grow:1;

有关 flex 的更多信息，请查看link in css-tricks