如何使按钮宽度相同并漂浮在中心附近？

Question

我创建了一个div行，因为我需要它们也是相同的宽度。我谷歌并没有多大帮助。我尝试使用.btn-row.btngroup{ width: some width;}更改css但仍然无效！

这是我的代码部分：

   <div class="btn-row">
     <div class="btn-group">
      <button type="button" class="btn btn-default ">Edit</button>
      </button>
     </div>

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


  <div class="btn-group">
    <button type="button" class="btn btn-default ">Add Service</button>
    </button>
  </div>
 </div>

这就是它需要的样子

这就是我的样子

另外，如何将最后一个按钮设为蓝色？来自twitter的例子并没有真正显示出来

谢谢，真的很感激！

Answer 1

要使按钮变蓝，请添加'btn-primary'类。

要使它们具有相同的宽度，请为每个按钮（而不是组）添加一个新类，并将该类的“宽度”定义为您想要的任何值。

.my-btn { width: 150px; }

Answer 2

要使按钮浮动在中心附近，只需添加

margin: 0px 0px 0px 100px;

或

margin-left:100px;

课程btn-row

中的

Answer 3

尝试这样的事情：

<强> HTML

 <div class="btn-row">
     <div class="btn-group">
         <button type="button" class="btn btn-default ">Edit</button>

         <button type="button" class="btn btn-default ">Delete</button>

         <button type="button" class="btn active btn-default ">Add Service</button>
     </div>
 </div>

<强> CSS

.btn-row{
    width:100%;
    text-align: center;
}

.btn{
    border-radius:5px;
    width: 35px; /* You desired width*/
    height: 30px;
    border: 1px solid grey;
    background: #fff;
}

.btn.active
{
    background:#488FE1;
    color: #fff;
    border: 1px solid #488FE1;
}

Here is the jsfiddle