Bootstrap5Card問題，float-right，d-flexwithjustify-context-end等，不作業-有解無憂

我今天開始學習 Bootstrap 5，并想出了一張卡片，它將由我的代碼中的一系列產品填充。我玩弄了行、列和定位，我認為這是迄今為止我最好的一次嘗試，花了 4 個小時來設計這張卡，這可能需要有人在這里花 5 分鐘來編碼，并試圖弄清楚為什么有些BStrap 類不能與其他類結合使用，觀看了幾個視頻，但我現在唯一的問題是這支鉛筆應該放在最右邊，除非 H5 標簽附帶它，否則它不能讓步。

Bootstrap Card的實際結果

索引.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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:$12.99)</a>
                            <a href="#" class="btn btn-primary">Details</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</body>

</html>

我已經嘗試過如下所示的以及類中的 "float-right"，但是該圖示沒有移動，我在此 H5 標簽周圍添加了容器和行/列，但卡中的所有內容都因此而失真。

我錯過了什么，或者我創建的這個結構是否足以在我的 UI 中使用？剛剛添加了邊界作為視覺指南，以查看邊界發生的位置。謝謝

<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>

uj5u.com熱心網友回復：

我找到的答案（終于！）是浮動結束，因為浮動右（或左）在 BS5.0 中已棄用

CSS float-right 在 Bootstrap 4 Navbar 中不起作用

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/474946.html

標籤：html 推特引导

上一篇：如何在控制臺中輸出字符影像

下一篇：引導容器未居中