如何使用 Bootstrap 3 制作漂亮的按钮矩阵？

Question

我有类似的东西：

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-sm-6">

      <div class="btn-group">
        <button type="button" class="btn btn-default">Button 1</button>
        <button type="button" class="btn btn-default">Button 2</button>
        <button type="button" class="btn btn-default">Button 3</button>
      </div>

      <div class="btn-group">
        <button type="button" class="btn btn-default">Button 4</button>
        <button type="button" class="btn btn-default">Button 5</button>
        <button type="button" class="btn btn-default">Button 6</button>
      </div>

      <div class="btn-group">
        <button type="button" class="btn btn-default">Button 7</button>
        <button type="button" class="btn btn-default">Button 8</button>
        <button type="button" class="btn btn-default">Button 9</button>
      </div>

    </div>

    <div class="col-sm-6">
    </div>
  </div>
</div>

我想要一个 3x3 的按钮矩阵。还有一点，左边和右边必须像这个例子（直线）：

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-default">button</button>
    <button type="button" class="btn btn-default">button</button>
    <button type="button" class="btn btn-default">button</button>
  </div>
</div>

我怎样才能做到？也许我需要添加一些 Bootstrap class 或编辑 CSS 文件？

Answer 1

您可以尝试以下方法：

    <div class="row">
        <div class="col-md-1 btn-group">
            <button type="button" class="btn btn-default">Button 1</button>
            <button type="button" class="btn btn-default">Button 2</button>
            <button type="button" class="btn btn-default">Button 3</button>
        </div>
        <div class="col-md-1 btn-group">
            <button type="button" class="btn btn-default">Button 4</button>
            <button type="button" class="btn btn-default">Button 5</button>
            <button type="button" class="btn btn-default">Button 6</button>
        </div>
        <div class="col-md-1 btn-group">
            <button type="button" class="btn btn-default">Button 7</button>
            <button type="button" class="btn btn-default">Button 8</button>
            <button type="button" class="btn btn-default">Button 9</button>
        </div>
    </div>

Answer 2

由于以下原因修改了@Pranjal 的回答：

bootstrap 网格（行、列...等）根据定义创建 12 列宽的行

因此，我们为每行 3 个按钮创建了一个 div 和 class 行。此外，我们希望按钮是行宽（12 列）的 1/3，因此我们将其设置为 class "col-md-4"（12 div 被 3 分割）。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">            
  <div class="row">          
    <div class="btn-group">
      <button type="button" class="btn btn-default col-md-4">Button 1</button>
      <button type="button" class="btn btn-default col-md-4">Button 2</button>
      <button type="button" class="btn btn-default col-md-4">Button 3</button>
    </div>
  </div>
  <div class="row">
    <div class=" btn-group">
      <button type="button" class="btn btn-default col-md-4">Button 4</button>
      <button type="button" class="btn btn-default col-md-4">Button 5</button>
      <button type="button" class="btn btn-default col-md-4">Button 6</button>
    </div>
  </div>
  <div class="row">
    <div class=" btn-group">
      <button type="button" class="btn btn-default col-md-4">Button 7</button>
      <button type="button" class="btn btn-default col-md-4">Button 8</button>
      <button type="button" class="btn btn-default col-md-4">Button 9</button>
    </div>
  </div>
</div>

Answer 3

一组按钮+几个伪classes

仅使用一个块与 .btn-group class。
通过伪classes应用一组CSS属性：

clear: left;属性强制按钮开始矩阵的新行。这是因为 .btn class 有 float: left; 属性.
以与 bootstrap.css 文件中描述的 btn-group class 类似的方式设置 border-radius 和 margin 属性.

三列按钮矩阵带Bootstrap3

https://codepen.io/glebkema/pen/bGWWMRz

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css";

/* Arrange buttons */
.btn-matrix>.btn {
  width: 33%; /* force buttons to have the same width regardless of content */
}
.btn-matrix>.btn:nth-child(3n + 4) {
  clear: left; /* force the button to start a new row of the matrix
                  (because .btn adds the `float: left;` property) */
  margin-left: 0; /* because .btn-group adds `margin-left: -1px;` to all buttons */
}
.btn-matrix>.btn:nth-child(n + 4) {
  margin-top: -1px; /* superimpose borders of the buttons from adjacent rows */
}

/* Fix border radius */
.btn-matrix>.btn:first-child {
  border-bottom-left-radius: 0;
}
.btn-matrix>.btn:nth-child(3) {
  border-top-right-radius: 4px !important;
}
.btn-matrix>.btn:nth-last-child(3) {
  border-bottom-left-radius: 4px !important;
}
.btn-matrix>.btn:last-child {
  border-top-right-radius: 0;
}

/* Decorations */
.btn-matrix {
  margin: 20px;
}

<div class="btn-group btn-matrix">
  <button type="button" class="btn btn-default">Button 1</button>
  <button type="button" class="btn btn-default">Button 2</button>
  <button type="button" class="btn btn-default">Button 3</button>
  <button type="button" class="btn btn-default">Button 4</button>
  <button type="button" class="btn btn-default">Button 5</button>
  <button type="button" class="btn btn-default">Button 6</button>
  <button type="button" class="btn btn-default">Button 7</button>
  <button type="button" class="btn btn-default">Button 8</button>
  <button type="button" class="btn btn-default">Button 9</button>
  <button type="button" class="btn btn-default">Button 10</button>
  <button type="button" class="btn btn-default">Button 11</button>
  <button type="button" class="btn btn-default">Button 12</button>
  <button type="button" class="btn btn-default">Button 13</button>
  <button type="button" class="btn btn-default">Button 14</button>
  <button type="button" class="btn btn-default">Button 15</button>
</div>

X×Y 矩阵 Bootstrap 3

代码只依赖于X:

.btn-matrix > .btn {
  width: (100/X)%;
}
.btn-matrix > .btn:nth-child(Xn+X+1) {
  clear: left;
  margin-left: 0;
}
.btn-matrix > .btn:nth-child(n+X+1) {
  margin-top: -1px;
}

.btn-matrix > .btn:first-child {
  border-bottom-left-radius: 0;
}
.btn-matrix > .btn:nth-child(X) {
  border-top-right-radius: 4px !important;
}
.btn-matrix > .btn:nth-last-child(X) {
  border-bottom-left-radius: 4px !important;
}
.btn-matrix > .btn:last-child {
  border-top-right-radius: 0;
}

三列按钮矩阵 Bootstrap 4 or 5

https://codepen.io/glebkema/pen/ZEKKoJG

@import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css";

/* Arrange buttons */
.btn-matrix {
   flex-wrap: wrap; /* allow buttons to jump to another row */
}
.btn-matrix > .btn {
   width: 33%; /* force buttons to have the same width regardless of content */
}
.btn-matrix > .btn:nth-child(3n + 4) {
   margin-left: 0; /* because .btn-group adds `margin-left: -1px;` to all buttons */
}
.btn-matrix > .btn:nth-child(n + 4) {
   margin-top: -1px; /* superimpose borders of the buttons from adjacent rows */
}

/* Fix border radius */
.btn-matrix > .btn:first-child {
   border-bottom-left-radius: 0;
}
.btn-matrix > .btn:nth-child(3) {
   border-top-right-radius: 4px !important;
}
.btn-matrix > .btn:nth-last-child(3) {
   border-bottom-left-radius: 4px !important;
}
.btn-matrix > .btn:last-child {
   border-top-right-radius: 0;
}

/* Decorations */
.btn-matrix {
   margin: 20px;
   max-width: 500px;
}

<div class="btn-group btn-matrix" role="group" aria-label="Three Column Button Matrix">
  <button type="button" class="btn btn-outline-primary">Button 1</button>
  <button type="button" class="btn btn-outline-primary">Button 2</button>
  <button type="button" class="btn btn-outline-primary">Button 3</button>
  <button type="button" class="btn btn-outline-primary">Button 4</button>
  <button type="button" class="btn btn-outline-primary">Button 5</button>
  <button type="button" class="btn btn-outline-primary">Button 6</button>
  <button type="button" class="btn btn-outline-primary">Button 7</button>
  <button type="button" class="btn btn-outline-primary">Button 8</button>
  <button type="button" class="btn btn-outline-primary">Button 9</button>
  <button type="button" class="btn btn-outline-primary">Button 10</button>
  <button type="button" class="btn btn-outline-primary">Button 11</button>
  <button type="button" class="btn btn-outline-primary">Button 12</button>
  <button type="button" class="btn btn-outline-primary">Button 13</button>
  <button type="button" class="btn btn-outline-primary">Button 14</button>
  <button type="button" class="btn btn-outline-primary">Button 15</button>
</div>

X×Y 矩阵 Bootstrap 4 或 5

代码只依赖于X:

.btn-matrix {
  flex-wrap: wrap;
}
.btn-matrix > .btn {
  width: (100/X)%;
}
.btn-matrix > .btn:nth-child(Xn+X+1) {
  margin-left: 0;
}
.btn-matrix > .btn:nth-child(n+X+1) {
  margin-top: -1px;
}

.btn-matrix > .btn:first-child {
  border-bottom-left-radius: 0;
}
.btn-matrix > .btn:nth-child(X) {
  border-top-right-radius: 4px !important;
}
.btn-matrix > .btn:nth-last-child(X) {
  border-bottom-left-radius: 4px !important;
}
.btn-matrix > .btn:last-child {
  border-top-right-radius: 0;
}

Answer 4

我认为这会对 you.Try 这一篇有所帮助。

button{
  margin-right:14px!important;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">            
  <div class="row">          
    <div class="btn-group">
      <button type="button" class="btn btn-default col-md-3">Button 1</button>
      <button type="button" class="btn btn-default col-md-3">Button 2</button>
      <button type="button" class="btn btn-default col-md-3">Button 3</button>
    </div>
  </div>
  <div class="row">
    <div class=" btn-group">
      <button type="button" class="btn btn-default col-md-3">Button 4</button>
      <button type="button" class="btn btn-default col-md-3">Button 5</button>
      <button type="button" class="btn btn-default col-md-3">Button 6</button>
    </div>
  </div>
  <div class="row">
    <div class=" btn-group">
      <button type="button" class="btn btn-default col-md-3">Button 7</button>
      <button type="button" class="btn btn-default col-md-3">Button 8</button>
      <button type="button" class="btn btn-default col-md-3">Button 9</button>
    </div>
  </div>
</div>

Answer 5

对于 Bootstrap 4，如果您有不等的文本需要换行。

.btn-matrix > .btn:nth-child(3n+4) {
  clear: left;
  margin-left: 0;
}
.btn-matrix > .btn:nth-child(n+4) {
  margin-top: -1px;
}
.btn-matrix > .btn:first-child {
  border-bottom-left-radius: 0;
}
.btn-matrix > .btn:nth-child(3) {
  border-top-right-radius: 4px !important;
}
.btn-matrix > .btn:nth-last-child(3) {
  border-bottom-left-radius: 4px !important;
}
.btn-matrix > .btn:last-child {
  border-top-right-radius: 0;
}

/* Decorations */
.btn-matrix { flex-wrap: wrap; }
/* force wrap text */
 .btn-matrix .btn{
white-space: normal !important;
}


<div class="btn-group btn-matrix">
  <a class="btn btn-sm btn-default col-sm-4">Button 1 Extra Content</a>
  <a  class="btn btn-sm btn-default col-sm-4">Button 2</a>
  <a  class="btn btn-sm btn-default col-sm-4">Button 3</a>
  <a  class="btn btn-sm btn-default col-sm-4">Button 4</a>
  <a  class="btn btn-sm btn-default col-sm-4">Button 5</a>
  <a  class="btn btn-sm btn-default col-sm-4">Button 6</a>
  <a  class="btn btn-sm btn-default col-sm-4">Button 7</a>
  <a  class="btn btn-sm btn-default col-sm-4">Button 8</a>
  <a  class="btn btn-sm btn-default col-sm-4">Button 9</a>
</div>

如何使用 Bootstrap 3 制作漂亮的按钮矩阵？

How I can make nice looking matrix of buttons with Bootstrap 3?

html

css

twitter-bootstrap

twitter-bootstrap-3

buttongroup

一组按钮+几个伪classes

三列按钮矩阵带Bootstrap3

X×Y 矩阵 Bootstrap 3

三列按钮矩阵 Bootstrap 4 or 5

X×Y 矩阵 Bootstrap 4 或 5