twitter-bootstrap 如何使用 bootstrap 3 制作漂亮的按钮矩阵？

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

提问by Vadym Perepeliak

I have something like that:

我有这样的事情：

<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>

And I would like to have matrix of buttons 3x3. One more thing, left and right side must look like this example (straight lines):

我想要 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>

How I can make it? Maybe I need to add some bootstrap class or edit css file?

我怎样才能做到？也许我需要添加一些引导程序类或编辑 css 文件？

回答by Gleb Kemarsky

One group of buttons + few pseudo-classes

一组按钮+少量伪类

1. Use only one block with the .btn-groupclass.

2. Apply a set of CSS properties by using of pseudo-classes:

   • :first-child
   • :last-child
   • :nth-child()
   • :nth-last-child()

3. The clear: left;property forces the button to start a new row of the matrix. It's because the .btnclass has the float: left;property.

4. Set up border-radiusand marginproperties in a similar way as the btn-groupclass is described in the bootstrap.cssfile.

1. .btn-group类只使用一个块。

2. 使用伪类应用一组 CSS 属性：

   • ：第一个孩子
   • ：最后一个孩子
   • :nth-child()
   • :nth-last-child()

3. 该clear: left;属性强制按钮开始矩阵的新行。这是因为.btn类有float: left;属性。

4. 以与bootstrap.css文件中描述的类类似的方式设置border-radius和margin属性。btn-group

3×3 matrix

3×3矩阵

Please check the result:

请检查结果：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

/* The heart of the matter */
.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 {
  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>
</div>

X×Y matrix

X×Y矩阵

The code depends only on X:

代码仅依赖于 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;
}

回答by Ruben Pirotte

Modified @Pranjal answer a bit because of following reason:

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

• the bootstrap grid (row, col-... etc) creates rows which are by definition 12 columns wide

• 引导网格（行、列...等）创建的行定义为 12 列宽

Because of this we create a div with class row for each row of 3 buttons. Also, we want the buttons the be 1/3 of the width of the row (12 columns) so we give it the class "col-md-4" (12 divided by 3).

因此，我们为每行 3 个按钮创建一个带有类行的 div。此外，我们希望按钮是行（12 列）宽度的 1/3，所以我们给它类“col-md-4”（12 除以 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>

回答by Optimus

You can try the following:

您可以尝试以下操作：

    <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>

回答by dulaj sanjaya

I Think this will be helpful to you.Try this one.

我认为这对你有帮助。试试这个。

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>

回答by user1594257

For Bootstrap 4 and if you have unequal text that needs to wrap.

对于 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>