如何在Bootstrap中使用不等大小的按钮使按钮组100％没有btn-group-justified（一大一小）？

【问题标题】：How to make button group 100% with non-equal size buttons without btn-group-justified (one large and one small) in Bootstrap?如何在Bootstrap中使用不等大小的按钮使按钮组100％没有btn-group-justified（一大一小）？
【发布时间】：2015-11-29 02:33:07
【问题描述】：

我想制作一些按钮组，其中一个按钮占据剩余宽度，一个按钮具有由内容设置的一些固定宽度。如何做到这一点。

对于不同的分辨率，它可能看起来像这样：

| <- 100% ->                              |
| large button fill               | fixed |

| <- 100% ->                       |                   
| large button fill        | fixed |

| <- 100% ->                |
| large button fill | fixed |

我测试是合理的，但它给出了相同大小的按钮。

【问题讨论】：

标签： twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

例如，将按钮的宽度设置为calc(100% - 20px)，如果该固定宽度为 20 像素。

【讨论】：

20px 不知道，但它知道它包含固定内容。
你知道里面内容的宽度是多少吗？如果说它是固定内容意味着它始终相同，那么您可以查看 Chrome 的开发者工具并通过检查所述元素并查看其计算属性来提取宽度。
固定意味着只有它有一些宽度，但没有人知道它将如何在 Firefox 4000 或 NewBrowser 版本一中呈现。我不能假设它有一些像素宽度 - 这不是设计 UI 的好方法。
浮起来怎么样？使固定内容向右浮动。或者使用 flexbox，它应该非常适合这项任务。如果这些不满足您 - 使用我在此处发布的解决方案并将 Javascript 添加到其中，以便您始终使用该元素的宽度，无论浏览器是什么。