jquery - 一个按钮拉伸(stretch)，其他是原始大小

Question

我想使用 bootstrap 包的 btn-group 在单个组/行中显示一组按钮。在我的案例中，组包括:

• 开头一张图片
• 中间有1个按钮
• 最后还有 1 张图片

是否可以将中间的按钮拉伸(stretch)到完整尺寸(拉伸(stretch)到最大 100% 尺寸)同时保持两侧两个按钮的原始尺寸？

我已经做了几次尝试，目前我正在使用第二个(参见 fiddle)。 问题是我有图像而不是图标，所以它们的大小可以变化......我不能在每个场景中为组的所有第一个和最后一个元素设置固定大小......

另一种方法是在文档初始化后使用 jQuery 设置适当的按钮大小。是否有合适的 CSS 解决方案？

fiddle :https://jsfiddle.net/kufzamc6/

Answer 1

不需要 JQuery，您可以使用 Flexbox 来做到这一点。这是 Demo with img

.btn-group.mytest {
  display: flex;
}

.middletest {
  flex: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="btn-group mytest" data-toggle="buttons">
  <label class="btn btn-sm btn-default">
    <span class="glyphicon glyphicon-search"></span>
  </label>

  <label class="btn btn-sm btn-default active middletest">
    <input type="checkbox" autocomplete="off" checked>
    <span class="glyphicon glyphicon-ok"></span>
    Object Tip A
  </label>

  <label class="btn btn-sm btn-default">
    <span class="glyphicon glyphicon-search"></span>
  </label>
</div>