Bootstrap 4根据内容

Question

我正在使用Bootstrap 4内联表单，如果可能的话，我希望动态平滑更改内联表单元素的自动宽度。

我知道如何使用例如col-md-4到col-md-6 transition: width 1s ease;实现这一目标，但问题在于 col-auto

你有什么建议吗？

我有这段代码

<div class="col-md-7">
        <div class="form-group row">
          <label for="pcp" class="col-auto col-form-label" title="{{ 'PRIMARY_CARE_PHYSICIAN' | translate }}">{{ 'PRIMARY_CARE_PHYSICIAN' | translate }}:</label>
          <input type="text" class="form-control col" placeholder="{{ 'PCP' | translate }}" ngModel name="pcp">
        </div>
      </div>

看起来像这样

因为我的应用程序将是多语言，英语和德语，标签将动态更改，对于相同的输入，我将有德语版本，如此...

正如你所看到的德语版标签是英文的长字，所以当用户通过点击英文或德国国旗改变语言时，我想实现，输入的平滑缩小与标签的长度成正比。 / p>

如果您有任何问题，请随时问我，我会更详细地解释。

提前谢谢