Bootstrap4使卡头高度相同 [英] Bootstrap4 make card headers the same height

问题描述

以Bootstrap 4的定价模板为例，假设我有不同文本长度的卡标题，因此在某些屏幕分辨率下，卡标题的高度会有所不同.我要确保它们始终处于相同的高度.

Using Bootstrap 4's pricing template as an example, suppose I have card headers of different text length such that under some screen resolution the height of the card headers become different. I want to ensure that they are always of the same height.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="card-deck mb-3 text-center">
    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">This is a really long header that is going to cause problem.</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
      </div>
    </div>
    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Pro</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>20 users included</li>
          <li>10 GB of storage</li>
          <li>Priority email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
      </div>
    </div>
    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Enterprise</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>30 users included</li>
          <li>15 GB of storage</li>
          <li>Phone and email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
      </div>
    </div>
  </div>

我可以做这项工作的唯一方法是做类似的事情

The only way I can make this work is to do something like

.card-header{height: 50px;}

在CSS中，但这不允许动态调整大小.任何帮助是极大的赞赏.这是 Codepen .

In CSS but this does not allow dynamic resizing. Any help is greatly appreciated. Here's the Codepen.

推荐答案

在Bootstrap-4中，将这些类用作卡的标头.

In Bootstrap-4, use these classes for the cards' header.

1. d-flex -将其显示更改为flex
2. align-items-center -将其内容垂直居中
3. justify-content-center -将其内容水平居中
4. h-100 -将其高度设置为100%

1. d-flex - to change its display to flex
2. align-items-center - center its content vertically
3. justify-content-center - center its content horizontally
4. h-100 - to make its height 100%

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="card-deck mb-3 text-center">
    <div class="card mb-4 box-shadow">
      <div class="card-header d-flex align-items-center justify-content-center h-100">
        <h4 class="my-0 font-weight-normal flex-grow-1">This is a really long header that is going to cause problem. You can add more and more words but height will be the same! This is a really long header that is going to cause problem. You can add more and more words but height will be the same!</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
      </div>
    </div>
    <div class="card mb-4 box-shadow">
      <div class="card-header d-flex align-items-center justify-content-center h-100">
        <h4 class="my-0 font-weight-normal flex-grow-1 ">Pro</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>20 users included</li>
          <li>10 GB of storage</li>
          <li>Priority email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
      </div>
    </div>
    </div>
  </div>

我建议您使用最新版本的引导程序，并检查此 codepen

I recommend you use the latest version of bootstrap and check this codepen

如果其中一张卡的内容较少，则其标头的高度会更高.将这些类添加到所有卡体中以解决问题.

If one of the cards has less content in its body, its header has more height. Add these classes to all the card bodies to fix the issue.

1. flex-column -将其flex-direction更改为列
2. h-100 -将其高度设置为100%

1. flex-column - to change its flex-direction to column
2. h-100 - to make its height 100%

<div class="card-body flex-column h-100">

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="card-deck mb-3 text-center">
    <div class="card mb-4 box-shadow">
      <div class="card-header d-flex align-items-center justify-content-center h-100">
        <h4 class="my-0 font-weight-normal flex-grow-1">This is a really long header that is going to cause problem. You can add more and more words but height will be the same! This is a really long header that is going to cause problem. You can add more and more words but height will be the same!</h4>
      </div>
      <div class="card-body flex-column h-100">
        <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
            <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
      </div>
    </div>
    <div class="card mb-4 box-shadow">
      <div class="card-header d-flex align-items-center justify-content-center h-100">
        <h4 class="my-0 font-weight-normal flex-grow-1 ">Pro</h4>
      </div>
      <div class="card-body flex-column h-100">
        <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>20 users included</li>
          <li>10 GB of storage</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
      </div>
    </div>
    </div>
  </div>

选中此 codepen

这篇关于Bootstrap4使卡头高度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！