相同宽度的按钮和按钮组

Question

制作this Bootply 示例，我想知道如何为普通按钮和由 3 个按钮组成的按钮组获得相同的宽度。 尝试使用 css 扩展，但我认为这不是引导网格系统意义上的正确方法。

我知道有类似 .btn-group-justified 但使用该类也会改变第一个 ("") 的宽度，但它们应该是固定的。

有什么想法吗？

.menu_button {
    min-width: 170px;
    max-width: 200px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="btn-toolbar">
  <div class="btn-group">
   <button class="btn btn-default menu_button">First</button>
  </div>
  <div class="btn-group">
   <button class="btn btn-default menu_button">Second</button>
  </div>
  <div class="btn-group">
   <button class="btn btn-default">&lt;</button>
   <button class="btn btn-default menu_button">3rd</button>
   <button class="btn btn-default">&gt;</button>
  </div>
  <div class="btn-group">
   <button class="btn btn-default">&lt;</button>
   <button class="btn btn-default menu_button">4th</button>
   <button class="btn btn-default">&gt;</button>
  </div>
</div>
</div>
</div>

Answer 1

这是怎么回事？

我为分组按钮创建了一个单独的类，以便它们可以具有单独的样式。

旁注

引导按钮的样式可以随着视口的变化而响应。因此，按照您的方式设置它们的样式可能会起作用，但可能无法响应，除非您在 CSS 中添加自己的媒体查询以随着视口的变化而改变它们的大小。

.menu_button {
    min-width: 170px !important;
    max-width: 200px !important;
}
.menu_button_grouped {
    min-width: 104px !important;
    max-width: 134px !important;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="btn-toolbar">
    <div class="btn-group">
   <button class="btn btn-default menu_button">First</button>
    </div>
    <div class="btn-group">
   <button class="btn btn-default menu_button">Second</button>
    </div>
  <div class="btn-group">
   <button class="btn btn-default">&lt;</button>
   <button class="btn btn-default menu_button_grouped">3rd</button>
   <button class="btn btn-default">&gt;</button>
  </div>
  <div class="btn-group">
   <button class="btn btn-default">&lt;</button>
   <button class="btn btn-default menu_button_grouped">4th</button>
   <button class="btn btn-default">&gt;</button>
  </div>
</div>
</div>
</div>

我希望这会有所帮助！

Answer 2

.buttons-group {
    min-width: -webkit-fill-available;
    justify-content: space-evenly;
}

.button-group {
    width: -webkit-fill-available;
}