卡片项目对齐 - 引导程序 [重复]答案

【问题标题】：Card Item Alignment - Bootstrap [duplicate]卡片项目对齐 - 引导程序 [重复]
【发布时间】：2022-01-13 23:30:47
【问题描述】：

好的，我正在尝试对齐卡片中的最后两个元素，以便第一个（按钮）可以位于左侧，另一个元素（带有多个社交图标图像的 Div）位于右侧。我怎样才能做到这一点？

<!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 position-absolute top-50 start-50 translate-middle">
    <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>

【问题讨论】：

不清楚你想得到什么。当我运行你的 sn-p 代码时，我看到左侧的按钮和右侧的图标。
@Movs 这就是我的看法：prntscr.com/26d895r
不要为对前一个问题的小修改创建新问题，而是编辑前一个问题

标签： html css twitter-bootstrap bootstrap-5

【解决方案1】：

这也适用于您的images，但我为您的社交媒体导入了font-awesome 图标，因为您的图像未呈现。本质上，我添加的只是一个 div col-4 用于您的a tag 并使用col-8 用于您的社交媒体图标。然后我在您的社交图标上使用text-end 将它们与右侧对齐。我还添加了align-items-center，所以它们是一致的。

<!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">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <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 align-items-center justify-content-between">
                  <div class="col-4">
                    <a href="#" class="btn btn-primary">Portfolio</a>
                  </div>
                    <div class="col-8 text-end">
                        <a href="#" class="fa fa-facebook"></a>
                        <a href="#" class="fa fa-instagram"></a>
                        <a href="#" class="fa fa-linkedin"></a>
                        <a href="#" class="fa fa-twitter"></a>
                    </div>
                </div>
        </div>
      </div>
    </div>
  </div>




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

</html>

【讨论】：