Bootstrap 5 卡问题，右浮动，d-flex with justify-context-end 等，不工作

Question

我今天开始学习 Bootstrap5 并想出了一张卡片，它将由我的代码中的产品集合填充。我玩过 rows 和 cols 以及定位，我认为这是迄今为止我最好的尝试，花了 4 个小时来设计这张卡片，这可能需要这里的人 5 分钟来编码，并试图弄清楚为什么有些BStrap classes 不能与其他组合一起使用，看了几个视频，但我现在唯一的问题是这支铅笔应该放在最右边，除非 H5 标签附带它，否则不能移动.

Actual result of Bootstrap Card

Index.html

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="styles.css">
    <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="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

    <title>Hello, world!</title>
</head>

<body>
    <div class="container mt-3">
        <div class="row">
            <div class="col">
                <div class="card" style="width: 350px; border:red 2px solid;">
                    <div class="row g-0">
                        <div class="col-12">
                            <h5 class="card-header text-white bg-info">Pet Harness
                                <a class="mr-auto" href=""><i class="bi bi-pencil-square"></i></a>    
                            </h5>
                            
                        </div>
                        <div class="col-6 text-center">
                            <img class="rounded mt-2" src="images/arya.jpg" style="width:150px; max-height:150px;"
                                alt="Card image cap" />

                        </div>

                        <div class="col-6">
                            <div class="row mt-2 mx-0">
                                <div style="border: red 1px solid">
                                    Some text1
                                </div>
                                <div style="border: red 1px solid">
                                    Some text2
                                </div>
                                <div style="border: red 1px solid">
                                    Some text3
                                </div>
                                <div style="border: red 1px solid">
                                    Some text4
                                </div>
                                <div style="border: red 1px solid">
                                    Some text5
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk
                                of the card's content.</p>
                            <a href="#" class="btn btn-primary">Add to cart (Price:.99)</a>
                            <a href="#" class="btn btn-primary">Details</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</body>

</html>

我试过 class="d-flex justify-content-end" 如下所示，还有 class 中的 "float-right"，但那个图标没有移动，我在这个 H5 标签周围添加了容器和 rows/columns，但卡片中的所有内容都因此而变形。

有什么想法我遗漏了什么，或者我创建的这个结构是否足以在我的 UI 中使用？刚刚添加了边界作为视觉指南，以查看边界的位置 place.Thanks

<h5 class="d-flex justify-content-end card-header text-white bg-info">
   Pet Harness <a class="mr-auto" href=""><i class="bi bi-pencil-square"></i></a></h5>

Answer 1

我找到的答案（终于！）是 float-end，因为 float-right（或左）在 BS5.0

中已弃用

Bootstrap 5 卡问题，右浮动，d-flex with justify-context-end 等，不工作

Bootstrap 5 Card question, float-right, d-flex with justify-context-end etc, not working

html

twitter-bootstrap