Bootstrap居中行内列文本无法右对齐问题求助

问题根源在于label默认是行内块元素，不会填满所在列的宽度，导致text-right类无法让文本真正靠右（文本仅在自身宽度范围内右对齐，视觉上看起来还是居中）。

只需给label添加Bootstrap的d-block类，将其转为块级元素，使其填满列的宽度，text-right就能正常生效：

<div class="container">
    <div class="row justify-content-center align-items-center">
        <div class="col-md-3">
            <label class="d-block text-right" for="numberOfPeople">Number of people</label>
        </div>
        <div class="col-md-7">
            <div class="p-inputgroup">
                <p-inputNumber inputId="numberOfPeople" [(ngModel)]="numberOfPeople"> </p-inputNumber>
            </div>
        </div>
    </div>
</div>

如果仍存在样式冲突（比如PrimeNG组件库的默认样式干扰），可以尝试给text-right添加优先级声明：class="d-block text-right !important"，但优先推荐用纯Bootstrap类解决。

内容的提问来源于stack exchange，提问作者tobiak777