当使用来自Bootstrap-vue以外的其他软件包的输入时，填充会受到影响

Question

对于我的网站的前端，我正在使用Bootstrap-Vue来显示输入字段。但是，对于名为“ Code postal”的索引，我使用了一个名为“ vue-the-mask”的程序包，其填充不相同。我认为它会自行调整，事实并非如此。为什么会这样？

<div class="row">
    <b-form-group id="adresseecole" label="Adresse" label-for="exampleInput2">
        <b-form-input class="styleInput" id="exampleInput2" v-model="InfoEcole.ECOLE_Adresse1" type="text"  placeholder="Entrer l'adresse">
        </b-form-input>
    </b-form-group>
    <b-form-group id="codepostalEcole" label="Code postal" label-for="exampleInput3">
        <the-mask id="exampleInput3" class="styleInput" mask="A#A #A#" v-model="codePostalEcole" type="text" placeholder="Entrer le code postal" />
        {{ codePostalEcole }}
    </b-form-group>
</div>
<div class="row">
    <b-form-group class="inputWidthleft" id="exampleInputGroup5" label="Ville" label-for="exampleInput5">
        <multiselect v-model="InfoEcole.ECOLE_Ville" :close-on-select="true" placeholder="Sélectionner la ville" :options="ville">
        </multiselect>
    </b-form-group>
    <b-form-group class="inputWidthright" id="exampleInputGroup2" label="Région" label-for="exampleInput2">
        <multiselect v-model="InfoEcole.ECOLE_Region4" :close-on-select="true" placeholder="Sélectionner la région" :options="list">
        </multiselect>
    </b-form-group>
</div>
<div class="row">
    <b-form-group class="inputWidthleft" id="exampleInputGroup2" label="Téléphone" label-for="exampleInput2">
        <b-form-input maxlength="13" class="styleInput" id="exampleInput2" v-model="phoneMasked" placeholder="Entrer le téléphone">
        </b-form-input>
    </b-form-group>
        <b-form-group class="inputWidthright" id="exampleInputGroup2" label="Télécopieur" label-for="exampleInput2">
        <b-form-input maxlength="13" class="styleInput" id="exampleInput2" v-model="telecopieurMasked" type="phone"  placeholder="Entrer le Télécopieur ">
        </b-form-input>
    </b-form-group>
</div>