Question

我在卡中居中放置文字时遇到问题。目前看起来像这样。

我希望卡片的描述/内容从同一点开始（在粉红色的线下）。你怎么得到的？

我使用引导程序，这是我的代码

  <div class="container">
    <div class="row">
      <div class="col-3">
        <div class="card">
          <img width="50" class="card-img-top" src="http://d3sdoylwcs36el.cloudfront.net/VEN-virtual-enterprise-network-business-opportunities-small-fish_id799929_size485.jpg">
          <div class="card-body">
            <h4 class="card-title">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a</h4>
            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever.</p>
          </div>
        </div>
      </div>
      <div class="col-3">
        <div class="card">
          <img width="50" class="card-img-top" src="http://d3sdoylwcs36el.cloudfront.net/VEN-virtual-enterprise-network-business-opportunities-small-fish_id799929_size485.jpg">
          <div class="card-body">
            <h4 class="card-title"> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a. Contrary to popular belief.</h4>
            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
          </div>
        </div>
      </div>
    </div>

Answer 1

在您的课程height: auto;上添加card-title，这样它将根据内部文本自动调整容器的大小。

Answer 2

将高度固定为card-title，使其无法更改！

因此，卡的描述/内容从同一点（在粉红色的线下）开始。

.card-title {
   min-height: 250px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-3">
      <div class="card">
        <img width="50" class="card-img-top" src="http://d3sdoylwcs36el.cloudfront.net/VEN-virtual-enterprise-network-business-opportunities-small-fish_id799929_size485.jpg">
        <div class="card-body">
          <h4 class="card-title">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a</h4>
          <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever.</p>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="card">
        <img width="50" class="card-img-top" src="http://d3sdoylwcs36el.cloudfront.net/VEN-virtual-enterprise-network-business-opportunities-small-fish_id799929_size485.jpg">
        <div class="card-body">
          <h4 class="card-title"> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a. Contrary to popular belief.</h4>
          <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
      </div>
    </div>
  </div>
</div>

引导程序-居中内容

2 个答案: