Html 如何使按钮大小相同，并在页面上居中？

我使用的是Bootstrap3，有3个不同大小的按钮。我试图使它们大小相同（基于最大的大小），然后将它们全部放在页面中间，其间有空格。这些按钮要么大小不一样，要么它们之间没有任何空间。我希望按钮是动态的，所以我不想让它们符合某个px宽度

尝试1失败：

<div class="container">
  <div class="btn-group blocks" data-toggle="buttons">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle Button</button>
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

.blocks,
.btn {
  padding: 24px 12px;
  margin: 5px 10px 5px 10px;
  border-radius: 0;
}

.container {
  background-color: pink;
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}

左边
中间按钮
赖特
.大厦，
.btn{
填充：24px 12px；
保证金：5px10px 5px10px；
边界半径：0；
}
.集装箱{
背景颜色：粉红色；
显示器：flex；
证明内容：之间的空间；
柔性流：行换行；
}

尝试2失败：

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4 buttons-container">
    <div class="btn-group btn-group-justified" role="group" aria-label="...">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Left</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default middle-btn">Middle Button</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Right</button>
      </div>
    </div>
  </div>
  <div class="col-md-4"></div>
</div>

.btn {
  padding: 24px 12px !important;
  margin: 5px 10px 5px 10px;
  border-radius: 0;
}

左边
中间按钮
赖特
.btn{
填充：24px 12px！重要；
保证金：5px10px 5px10px；
边界半径：0；
}

尝试以下代码：

.blocks,
.btn {
  padding: 24px 12px;
  margin: 5px 10px 5px 10px;
  border-radius: 0;  
}

.blocks {width:100%;}

.btn {max-width:150px;width:100%;}

.container {
  background-color: pink;
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}

对于attempt1:jsfiddle链接： 对于attempt2:jsfiddle链接：