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

时间：2016-07-08 07:38:10

标签： html css twitter-bootstrap twitter-bootstrap-3 buttongroup

我有类似的东西：

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我想要按钮矩阵3x3。还有一件事，左侧和右侧必须看起来像这个例子（直线）：

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我怎么做到的？也许我需要添加一些引导类或编辑css文件？

5 个答案:

答案 0 :(得分：13)

一组按钮+几个伪类

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

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

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

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

    5. 3×3矩阵

    请检查结果：

    @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矩阵

    代码仅取决于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;
}

答案 1 :(得分：0)

您可以尝试以下操作：

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

答案 2 :(得分：0)

修改后的@Pranjal因为以下原因而回答：

  • 引导网格（行，col -...等）创建按行定义为12列宽的行

因此，我们为3行按钮的每一行创建一个带有类行的div。此外，我们希望按钮为行宽（12列）的1/3，因此我们给它类＆＃34; col-md-4＆＃34; （12除以3）。

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

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

  while (1 == scanf("%s", s))
  {
      // Parse the string s and add value to array
  }

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

答案 4 :(得分：0)

对于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>
相关问题
最新问题