如何在PrimeVue InlineMessage中用Bootstrap实现文本左右对齐

要实现PrimeVue InlineMessage组件内两段文本的左右对齐效果，直接用Bootstrap的flex布局类就能解决，你之前的问题是没正确使用适配的布局类，试试下面的写法：

<InlineMessage severity="error" class="my-4 d-flex justify-content-between align-items-center">
  Error Request Percentage
  <span class="flex-shrink-0">10%</span>
</InlineMessage>

类作用说明 #

• d-flex：将InlineMessage容器设置为flex布局，这是实现左右分布的基础，替代你之前的block类
• justify-content-between：让flex容器内的子元素分别靠左右两端对齐，直接实现你要的左右分布效果
• align-items-center：让两段文本在垂直方向居中，保证排版美观
• flex-shrink-0：给右侧的百分比文本添加这个类，防止容器变窄时文本被挤压变形

如果PrimeVue的默认样式覆盖了Bootstrap类的效果，可以添加自定义类增强优先级：

.inline-message-align {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

对应的组件代码：

<InlineMessage severity="error" class="my-4 inline-message-align">
  Error Request Percentage
  <span class="flex-shrink-0">10%</span>
</InlineMessage>

内容的提问来源于stack exchange，提问作者N.Ekanayake