时间戳

首页 > 解决方案 > Bootstrap 4: flex-row to bottom in card

html - Bootstrap 4: flex-row to bottom in card

问题描述

如何在卡内的底部对齐弹性行？我目前有两张并排对齐的卡片，但是当其中一个文本小于另一个时，包含“（100）（100）”的div会失去对齐。

我知道像这样的问题，但我已经尝试了他们的解决方案，但没有任何效果。

运行示例。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>


  <div class="row mb-2">
      <div class="col-md-6 d-flex align-items-stretch">
        <div class="card mb-4 shadow bg-white rounded">
          <div class="card-body">
            <div class="row pb-0">
              <div class="col-9">
                <strong class="mb-2 text-secondary"">Name A</strong>
              </div>
              <div class="col-3">
                <img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
              </div>
            </div>
            <h3 class="card-title mb-0">
              <a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
            </h3>
            <div class="mb-1 text-muted date">2020-01-01</div>
            <p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Eget felis eget nunc lobortis mattis aliquam faucibus.</p>

<!-- This should be aligned to the bottom -->

            <div class="d-flex flex-row mt-0 ml-0 pl-0 ">
                <!-- <span class="flaticon-clapping-2" data-toggle="tooltip" data-placement="top" title="Nº de likes no Arquivo de Opinião"></span> -->
                <span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
                <span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
                <span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
                <span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
            </div>


          </div>
        </div>
      </div>

      <div class="col-md-6 d-flex align-items-stretch">
        <div class="card mb-4 shadow bg-white rounded">
          <div class="card-body">
            <div class="row pb-0">
              <div class="col-9">
                <strong class="mb-2 text-secondary"">Name A</strong>
              </div>
              <div class="col-3">
                <img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
              </div>
            </div>
            <h3 class="card-title mb-0">
              <a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
            </h3>
            <div class="mb-1 text-muted date">2020-02-01</div>
            <p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

<!-- This should be aligned to the bottom -->

            <div class="d-flex flex-row mt-0 ml-0 pl-0 ">
                <span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
                <span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
                <span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
                <span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
            </div>

          </div>
        </div>
      </div>


</div>

标签： htmlcssbootstrap-4

解决方案

如果您添加d-flex flex-columncard-body div和mt-autobottom div，将解决您的问题。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>


  <div class="row mb-2">
      <div class="col-md-6 d-flex align-items-stretch">
        <div class="card mb-4 shadow bg-white rounded">
          <div class="card-body d-flex flex-column">
            <div class="row pb-0">
              <div class="col-9">
                <strong class="mb-2 text-secondary">Name A</strong>
              </div>
              <div class="col-3">
                <img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
              </div>
            </div>
            <h3 class="card-title mb-0">
              <a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
            </h3>
            <div class="mb-1 text-muted date">2020-01-01</div>
            <p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Eget felis eget nunc lobortis mattis aliquam faucibus.</p>

<!-- This should be aligned to the bottom -->

            <div class="d-flex flex-row mt-auto ml-0 pl-0 ">
                <!-- <span class="flaticon-clapping-2" data-toggle="tooltip" data-placement="top" title="Nº de likes no Arquivo de Opinião"></span> -->
                <span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
                <span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
                <span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
                <span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
            </div>


          </div>
        </div>
      </div>

      <div class="col-md-6 d-flex align-items-stretch">
        <div class="card mb-4 shadow bg-white rounded">
          <div class="card-body d-flex flex-column">
            <div class="row pb-0">
              <div class="col-9">
                <strong class="mb-2 text-secondary">Name A</strong>
              </div>
              <div class="col-3">
                <img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
              </div>
            </div>
            <h3 class="card-title mb-0">
              <a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
            </h3>
            <div class="mb-1 text-muted date">2020-02-01</div>
            <p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

<!-- This should be aligned to the bottom -->

            <div class="d-flex flex-row mt-auto ml-0 pl-0 ">
                <span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
                <span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
                <span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
                <span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
            </div>

          </div>
        </div>
      </div>


</div>
</body>
</html>

推荐阅读