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

Question

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

我知道有类似 .btn-group-justified 的东西，但使用它 class 也会改变第一个（“<”）和最后一个元素（“>”）的宽度，但它们应该是已修复。

有什么想法吗？

.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

这个怎么样？

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

旁注

Bootstrap 按钮的样式设置为响应视口的变化。因此，按照您的方式设置它们的样式可能会起作用，但除非您在 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;
}

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

Button and button group with same width

html

twitter-bootstrap