使用 Bootstrap 创建按钮组 table

Question

我正在使用 Bootstrap 4，但我在尝试创建多行按钮组时遇到问题，如下图所示。 Bootstrap 中常用的按钮组似乎只支持排成一行或一列的按钮。

有没有一种方法可以利用 Bootstrap 中已有的按钮支持来实现这一点，而不必从头开始编写 CSS/JavaScript？

相关，但这只回答了按钮在矩阵中很好对齐的情况：

Answer 1

您可以使用 row 和 col 类对齐它们。

最小值 css 的示例：

.inline {
  display: inline-block;
  margin: 25px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous" />

<div class="inline">
  <div class="row">
    <button type="button" class="btn btn-primary col">btn1</button>
  </div>
  <div class="row">
    <button type="button" class="btn btn-primary col-6">btn2</button>
    <button type="button" class="btn btn-primary col-6">btn3</button>
  </div>
  <div class="row">
    <button type="button" class="btn btn-primary col-4">btn4</button>
    <button type="button" class="btn btn-primary col-4">btn5</button>
    <button type="button" class="btn btn-primary col-4">btn6</button>
  </div>
</div>

图像示例的副本：

.inline {
  display: inline-block;
  margin: 25px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}

.btn {
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
  border-radius: 0 !important;
}

.row {
  margin: 0 !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous" />
<div class="inline">
  <div class="row">
    <button type="button" class="btn btn-primary col">btn1</button>
  </div>
  <div class="row">
    <button type="button" class="btn btn-primary col-6">btn2</button>
    <button type="button" class="btn btn-primary col-6">btn3</button>
  </div>
  <div class="row">
    <button type="button" class="btn btn-primary col-4">btn4</button>
    <button type="button" class="btn btn-primary col-4">btn5</button>
    <button type="button" class="btn btn-primary col-4">btn6</button>
  </div>
</div>

请注意，我已将 important 添加到样式以覆盖 bootstrap 样式。如果您在 bootstrap css 之后导入样式表，则不必向其中添加 !important。

使用 Bootstrap 创建按钮组 table

Create a button-group table with Bootstrap

css

twitter-bootstrap

bootstrap-4

buttongroup