Bootstrap 5-卡元素在底部对齐-前端问题

Bootstrap 5 - Card Element Alignment on the Bottom(Bootstrap 5-卡元素在底部对齐)

本文介绍了Bootstrap 5-卡元素在底部对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

好的，我是Bootstrap的新手，我尝试将一个按钮元素一直放在Card的底部，即使正文文本很小。但是，我总是收到这个结果，它没有将我的按钮放在我需要的右下角位置。数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="/bootstrap-icons-1.7.2/*">
  <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>
  <div class="card col-8">
    <div class="row g-0">
      <div class="col-md-4">
        <img src="Logo.png" class="img-fluid rounded-start" alt="Logo">
      </div>
      <div class="col-md-8">
        <div class="card-body position-relative">
          <h2 class="card-title" style="font-weight: bold;">John Doe</h5>
            <h6 class="card-subtitle pb-3">Developer</h5>
              <p class="card-text pb-3">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <div class="row justify-content-between">
                    <a href="#" class="col-2 btn btn-primary">Portfolio</a>
                    <div class="col-10">
                        <img src="/bootstrap-icons-1.7.2/facebook.svg" alt="Facebook Icon" width="32" height="32">
                        <img src="/bootstrap-icons-1.7.2/instagram.svg" alt="Instagram Icon" width="32" height="32">
                        <img src="/bootstrap-icons-1.7.2/linkedin.svg" alt="Linkedin Icon" width="32" height="32">
                        <img src="/bootstrap-icons-1.7.2/twitter.svg" alt="Twitter Icon" width="32" height="32">
                    </div>
                </div>
        </div>
      </div>
    </div>
  </div>




  <script src="js/bootstrap.js"></script>
</body>

</html>

推荐答案

由于您已经将元素嵌套在bootstrap row中，因此可以添加与justify-content: flex-end;同义的类justify-content-end。我还在a tag上声明了a tag的宽度。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="/bootstrap-icons-1.7.2/*">
  <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>
  <div class="card col-8">
    <div class="row g-0">
      <div class="col-md-4">
        <img src="Logo.png" class="img-fluid rounded-start" alt="Logo">
      </div>
      <div class="col-md-8">
        <div class="card-body position-relative">
          <h2 class="card-title" style="font-weight: bold;">John Doe</h5>
            <h6 class="card-subtitle pb-3">Developer</h5>
              <p class="card-text pb-3">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              <div class="row justify-content-end">
                <a href="#" class="col-2 btn btn-primary w-25">Portfolio</a>
              </div>
        </div>
      </div>
    </div>
  </div>

编辑~如果该行中有两个元素，并且我想将一个放在右边/开始，另一个放在左边/结束，该怎么办？&q；

然后使用justify-content-between。见下文。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="/bootstrap-icons-1.7.2/*">
  <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>
  <div class="card col-8">
    <div class="row g-0">
      <div class="col-md-4">
        <img src="Logo.png" class="img-fluid rounded-start" alt="Logo">
      </div>
      <div class="col-md-8">
        <div class="card-body position-relative">
          <h2 class="card-title" style="font-weight: bold;">John Doe</h5>
            <h6 class="card-subtitle pb-3">Developer</h5>
              <p class="card-text pb-3">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              <div class="row justify-content-between">
                <a href="#" class="col-2 btn btn-primary w-25">Portfolio</a>
                <a href="#" class="col-2 btn btn-primary w-25">Portfolio</a>
              </div>
        </div>
      </div>
    </div>
  </div>

这篇关于Bootstrap 5-卡元素在底部对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！