Question

我想使用btn-group包的bootstrap来显示单个组/行中的按钮组。在我的情况下，小组包括：

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

是否可以将中间的按钮拉伸至完整尺寸（拉伸至最大100％尺寸），同时保持两侧按钮的原始尺寸？

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

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

Answer 1

您不需要使用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>

一个按钮伸展，其他按钮是原始尺寸

1 个答案: