如何在 Bootstrap 5 中的列表组项目中添加按钮 link？

Question

我想让一个列表组项目有一个 link 和一个删除项目的按钮。我怎样才能用 Bootstrap 5 做到这一点？这是我尝试过的方法，但没有用。

  <div class="list-group">
    <a href="/link1" class="list-group-item list-group-item-action" aria-current="true">
      Link1
      <span class="float-end">
        <a href="/trash1" class="btn btn-default trash">
          <span class="bi bi-trash" aria-hidden="true"></span>
        </a>
      </span>
    </a>
  </div>

Answer 1

您的按钮将无法使用，因为您的代码包含嵌套的锚标记

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
   <a class="text-decoration-none" href="/link1">Link 1</a>
    <a  href="/trash1" class="btn btn-sm btn-danger">x</a>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
   <a class="text-decoration-none" href="/link2">Link 2</a>
    <a  href="/trash2" class="btn btn-sm btn-danger">x</a>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
   <a class="text-decoration-none" href="/link3">Link 3</a>
    <a href="/trash3" class="btn btn-sm btn-danger">x</a>
  </li>
</ul>

如何在 Bootstrap 5 中的列表组项目中添加按钮 link？

How to add button link inside a list-group-item in Bootstrap 5?

twitter-bootstrap

bootstrap-5