将链接放在卡片的右侧 - 引导程序答案

【问题标题】：Put a link on the right of a card - bootstap将链接放在卡片的右侧 - 引导程序
【发布时间】：2022-01-13 16:25:23
【问题描述】：

我有一个如下所示的页面（显示路线）：

我想将指向“所有Camgrounds”的链接放在卡片的右侧。我尝试了几种方法，例如添加“text-right”或“justify-content-end”等类，但没有奏效。我正在使用框架 Boostrap-5。任何帮助将非常感激。这是 SHOW 页面的代码：

<% layout('layouts/boilerplate') %>
    <div class="row">
        <div class="col-6 offset-3">
            <div class="card">
                <div class="card-header">
                    <h2>
                        <%= campground.title %>
                    </h2>
                </div>
                <img src="<%= campground.image %>" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">
                        <%= campground.description %>
                    </p>
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item text-muted">
                        <%= campground.location %>
                    </li>
                    <li class="list-group-item">
                        $ <%= campground.price %> /night
                    </li>
                </ul>
                <div class="card-body">
                    <a class="card-link btn btn-warning" href="/campgrounds/<%= campground._id %>/edit">Edit</a>
                    <form class="d-inline" action="/campgrounds/<%= campground._id %>?_method=DELETE" method="post">
                        <button class="btn btn-danger">Delete</button>
                    </form>
                    <a class="card-link d-inline text-right" href="/campgrounds">All
                        campgrounds</a>
                </div>
            </div>
        </div>
    </div>

【问题讨论】：

标签： bootstrap-5

【解决方案1】：

Bootstrap 5 中有many different ways to align right。

在您的情况下，使用float-end 可能是最简单的。

  <div class="row">
        <div class="col-6 offset-3">
            <div class="card">
                <div class="card-header">
                    <h2> Title </h2>
                </div>
                <img src="//via.placeholder.com/500" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text"> campground.description </p>
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item text-muted"> campground.location </li>
                    <li class="list-group-item"> $ 39/night </li>
                </ul>
                <div class="card-body">
                    <a class="card-link btn btn-warning" href="/campgrounds/<%= campground._id %>/edit">Edit</a>
                    <form class="d-inline" action="/campgrounds/<%= campground._id %>?_method=DELETE" method="post">
                        <button class="btn btn-danger">Delete</button>
                    </form>
                    <a class="card-link float-end" href="/campgrounds">All campgrounds</a>
                </div>
            </div>
        </div>
  </div>

https://codeply.com/p/S9PyKHZC9y

另请注意，left 和 right have been replaced 与 start 和 end 在 Bootstrap 5 中。

【讨论】：