javascript - 如何根据具有动态宽度的父容器设置比例宽度

Question

我有一个具有动态宽度的 div(使用百分比大小)。在这里面我有两个按钮，问题来了，我必须让这两个按钮具有相同长度的容器。

到目前为止，我已经成功地使第一个按钮具有动态宽度，但是这两个按钮并没有覆盖容器的所有宽度

这是我的 code

在fiddle中可以看到，css类:"btn-stretch"，这个类占用了父容器的85%

所以这两个按钮的宽度必须与输入字段的宽度相同。

这是基本结构:

<div>
   <input widthDynamic1/>
</div>
<div>
   <button1 widthDynamic2/>
   <button2 widthStatic3/>
</div>

哪里:

widthDynamic1 = widthDynamic2 + widthStatic3

Answer 1

您可以添加此 css 属性:

.btn-group {width:100%;}
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {

    width: calc(100% - 26px);
}

FIDDLE