html - 具有相同宽度的按钮和按钮组

Question

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

我知道有类似 .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

这个怎么样？

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

边注

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

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

希望对您有所帮助!