我怎样才能把下面的代码变成一个<div> ?

Question

现在如果我在showLanguageControl为真时将它们放在一起，它看起来很好。 但是，当showFaxNumber为 true 时，即使showLanguageControl被隐藏，该位置也会偏离。 可以把这两者结合起来吗？

要么，要么我需要两个<div>在相同的位置，这取决于哪个是真的。 有关更多信息，两者都不会同时为真。

<!--open text box if language control is true-->
    <div class="col-sm-12 col-md-4" [style.visibility]="showLanguageControl === true ? 'visible' : 'hidden'">
        <label class="col-sm-3 col-md-5" for="providerRoute">Linked Language Letter</label>
        <div class="col-sm-5 col-md-7 padding-adj">
            <input type="text" id="linkedLetter" name="linkedLetter" #linkedLetter formControlName="linkedLetter" [ngClass]="['form-control','input-xs']" />
        </div>
    </div>

          <!--open text box if exception group is true-->
   <div class="col-sm-12 col-md-4" [style.visibility]="showFaxNumberInput === true ? 'visible' : 'hidden'">
        <label class="col-sm-3 col-md-5" for="providerRoute">Fax Number</label>
        <div class="col-sm-5 col-md-7 padding-adj">
           <input type="text" id="faxInput" name="faxInput" #faxInput formControlName="faxInput" [ngClass]="['form-control','input-xs']" />
        </div>
    </div>

Answer 1

回答我自己的问题：

我更改了以下行：

<div class="col-sm-12 col-md-4" [style.visibility]="showLanguageControl === true ? 'visible' : 'hidden'">

至：

<div class="col-sm-12 col-md-4" [style.display]="showLanguageControl === true ? 'block' : 'none'">

这样做可以将整个 UI 部分从 DOM 中取出，允许另一个 UI 部分位于它仍然存在的位置之上。