使用Bootstrap创建按钮组表

Question

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

是否有一种方法可以利用Bootstrap中已经存在的按钮支持，而不必从头开始编写CSS / JavaScript？

---

相关，但这仅在按钮在矩阵中正确对齐的情况下才回答问题：How I can make nice looking matrix of buttons with bootstrap 3?

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>

请注意，我已经为样式添加了重要内容，以覆盖引导样式。如果您在引导CSS之后导入样式表，则不必在其中添加!important。