Question

Made this Bootply示例，我想知道如何为普通按钮和包含3个按钮的按钮组获得相同的宽度。尝试使用css扩展，但我不认为这是自举网格系统的正确方法。

我知道有类似.btn-group-justified之类的内容，但使用该类也会更改第一个（“＆lt;”）和最后一个元素（“＆gt;”）宽度，但它们应该是固定的。

有什么想法吗？

.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

这是怎么回事？

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

SIDE NOTE

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

＆＃13;

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

＆＃13;

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

＆＃13;

我希望这有帮助！

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

1 个答案: