Bootstrap 5 table 个按钮放置

Question

我有一个 table 应该代表一个 CRUD 应用程序，其中有一个人的详细信息以及一个编辑和删除按钮。这两个按钮（以及以后可能添加的任何其他按钮）旨在并排显示。这适用于较大的屏幕尺寸，但在较小的设备上，按钮会堆叠在一起。

如何才能让按钮在较小的屏幕尺寸上保持在彼此的一侧？

<head>
  <!--Material Icons -->
  <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet" />

  <!-- Bootstrap 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" />


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

<body class="bg-light">


  <!-- Main body -->
  <div class="container">
    <!-- Table -->
    <div class="table-responsive">
      <table class="table table-fit mt-5 table-dark table-striped">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
            <th scope="col">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>myFirstName</td>
            <td>myLastName</td>
            <td>@myHandle</td>
            <td>
              <a type="button" class="btn">
                <i class="material-icons text-warning">edit</i>
              </a>
              <a type="button" class="btn">
                <i class="material-icons text-danger">delete</i>
              </a>
            </td>
          </tr>
          <tr>
            <th scope="row">1</th>
            <td>anotherFirstName</td>
            <td>anotherLastName</td>
            <td>@anotherHandle</td>
            <td>
              <a type="button" class="btn">
                <i class="material-icons text-warning">edit</i>
              </a>
              <a type="button" class="btn">
                <i class="material-icons text-danger">delete</i>
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Answer 1

在此类用例中，这是每个开发人员都面临的一个非常痛苦的情况。

不过，您应该考虑几个解决方案（我会说是用户体验）：

如果增加action buttons的几率很高，可以简单的将它们全部分组，再添加更多的button来显示action items列表： Refer the screenshot

如果您不想使用选项 1.，您可以选择在特定断点后将 table 转换为手风琴，用户可以在其中看到全名和所有内容操作项或使其成为基于卡片的布局以显示所有记录。
悬停该行时显示所有操作项。所有操作项都将 slide/fade from/on 在行顶部的右侧。类似于 Gmail。

Answer 2

问题已通过将两个按钮放入 flex 容器中得到解决

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!--Material Icons -->
    <link
      href="https://fonts.googleapis.com/css2?family=Material+Icons"
      rel="stylesheet"
    />

    <!-- Bootstrap 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"
    />



    <title>Hello, world!</title>
  </head>
  <body class="bg-light">
    

    <!-- Main body -->
    <div class="container">
      <!-- Table -->
      <div class="table-responsive" >
      <table class="table table-fit mt-5 table-dark table-striped" >
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
            <th scope="col">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>myFirstName</td>
            <td>myLastName</td>
            <td>@myHandle</td>
            <td >
              <div class="d-flex flex-row  mb-3">
                <div ><button type="button" class="btn">
                  <i class="material-icons text-warning">edit</i>
                </button></div>
                <div ><button type="button" class="btn">
                  <i class="material-icons text-danger">delete</i>
                </button></div>
              </div>
            </td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>anotherFirstName</td>
            <td>anotherLastName</td>
            <td>@anotherHandle</td>
            <td >
              <div class="d-flex flex-row mb-3">
                <div ><button type="button" class="btn">
                  <i class="material-icons text-warning">edit</i>
                </button></div>
                <div ><button type="button" class="btn">
                  <i class="material-icons text-danger">delete</i>
                </button></div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->


    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Bootstrap 5 table 个按钮放置

Bootstrap 5 table buttons placement

html

css

bootstrap-table

bootstrap-5