Bootstrap 将按钮放在一行 - CSS

Bootstrap 是一个流行的 CSS 框架，用于快速构建现代化的网站和 Web 应用程序。它提供了一组基本的 CSS 样式和 JavaScript 插件，用于处理常见的 UI 组件和布局。

在 Bootstrap 中，将按钮放在一行需要使用一些 CSS 类。以下是一些示例代码和说明。

水平按钮组

水平按钮组允许将多个按钮放置在同一行中，并使其看起来像一个组。要创建水平按钮组，请在 div 元素中使用 .btn-group 类，并在每个按钮上使用 .btn 类。例如：

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

在上面的代码段中，btn-group 类表示该组是一个按钮组，role="group" 属性使其符合无障碍性标准，aria-label 属性提供了一个文本标签的名字，使其适用于屏幕阅读器用户。每个按钮都有 .btn 类，表示它是一个按钮。

工具栏按钮

另一个常见的按钮布局是工具栏。工具栏是一组按钮，它们排成一行，并允许用户执行相关操作。要创建工具栏，请在 div 元素中使用 .btn-toolbar 类，并在每个按钮组中使用 .btn-group 类。例如：

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mx-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group mx-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-success">8</button>
  </div>
</div>

在上面的代码段中，btn-toolbar 类表示整个工具栏，role="toolbar" 属性使其成为工具栏元素，aria-label 属性提供了一个文本标签的名字。每个按钮组都是 btn-group 类，并使用 role="group" 属性。还添加了一些间距类别（如 .mx-2），使按钮之间有一些间距。

在表格中放置按钮

有时，您可能希望在表格单元格中添加按钮。要在表格中放置按钮，请在 td 元素中使用 .btn 类。例如：

<table class="table">
  <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>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>
        <button type="button" class="btn btn-primary btn-sm">Edit</button>
        <button type="button" class="btn btn-danger btn-sm">Delete</button>
      </td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
      <td>
        <button type="button" class="btn btn-primary btn-sm">Edit</button>
        <button type="button" class="btn btn-danger btn-sm">Delete</button>
      </td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
      <td>
        <button type="button" class="btn btn-primary btn-sm">Edit</button>
        <button type="button" class="btn btn-danger btn-sm">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

在上面的代码段中，在每个行的最后一个单元格中添加了两个按钮：一个 .btn-primary 类按钮用于编辑，一个 .btn-danger 类按钮用于删除。

总结

通过使用 Bootstrap 提供的 CSS 类，您可以轻松地在您的网站或 Web 应用程序中将按钮放置在一行。您可以使用水平按钮组、工具栏按钮和表格中的按钮来实现不同的布局。希望这篇文章对您有所帮助！