Jquery 一个按钮拉伸,其他按钮为原始尺寸
我想使用Jquery 一个按钮拉伸,其他按钮为原始尺寸,jquery,html,css,twitter-bootstrap-3,Jquery,Html,Css,Twitter Bootstrap 3,我想使用bootstrap包的btn组来显示单个组/行中的一组按钮。在我的案例中,小组包括: 一开始就有一个图像 中间有一个按钮 最后还有一张图片 是否可以将按钮在中到全尺寸(拉伸至最大100%尺寸)同时保持两侧上的两个按钮的原始大小?/p> 我做了几次尝试,目前正在使用第二次(请参见小提琴)。 问题是,我有图像而不是图标,所以它们的大小可以变化。。。我不能只为每个场景中组的所有第一个和最后一个元素设置固定大小 另一种方法是在初始化文档后使用jQuery设置适当大小的按钮。是否有合适的CSS
bootstrap
包的btn组
来显示单个组/行中的一组按钮。在我的案例中,小组包括:
- 一开始就有一个图像
- 中间有一个按钮
- 最后还有一张图片
是否可以将按钮在中到全尺寸(拉伸至最大100%尺寸)<强>同时保持两侧上的两个按钮的原始大小强>?/p> 我做了几次尝试,目前正在使用第二次(请参见小提琴)。 问题是,我有图像而不是图标,所以它们的大小可以变化。。。我不能只为每个场景中组的所有第一个和最后一个元素设置固定大小
另一种方法是在初始化文档后使用jQuery
设置适当大小的按钮。是否有合适的CSS
解决方案
fiddle:无需JQuery您可以使用
Flexbox
完成此操作。这是
.btn-group.mytest{
显示器:flex;
}
.米德尔斯特斯特{
弹性:1;
}
物体尖端A
比我预期的效果更好:)行数最少!我刚刚注意到,在IE
中有一个问题,即如果组的某些部分被溢出隐藏,则具有flex:1
-的标签没有宽度。。不过Chrome
中没有此类问题。但现在-这就可以了:)什么版本的IE
?使用版本11。这里是小提琴:就像溢出在IE
中不起作用一样。。奇怪。。在我的localhost
apache服务器上,结果有点不同(溢出工作),但在这两种情况下IE
似乎都有问题..好的,我找到了解决方案。。。对于IE
您必须使用flex:1 0 auto代码>而不是flex:1代码>:)我在这里找到了答案:我没有读过这篇文章,所以可能作者的问题有点不同。。但他的解决方案效果很好