如何使按钮大小相同并将所有按钮放在页面上？

I'm using Bootstrap 3 and have 3 buttons of different sizes. I am trying to make them all the same size (based on the size of the largest one) and then center all of them in the middle of the page with space in between them. The buttons either end up not being the same size or not having any space in between them. I want the buttons to be dynamic so I don't want to make them conform to a certain px width.

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

Failed Attempt 1:

尝试失败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;
}

Failed Attempt 2:

尝试失败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;
}

1 个解决方案

#1

Try this code:

试试这段代码：

.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;
}

for attempt1: jsfiddle link: https://jsfiddle.net/Loxn91oq/4/ for attempt2: jsfiddle link: https://jsfiddle.net/ogdfLq9c/

for attempt1：jsfiddle链接：https：//jsfiddle.net/Loxn91oq/4/ for attempt2：jsfiddle链接：https：//jsfiddle.net/ogdfLq9c/

#1