如何在引导程序中左右对齐同一段落中的文本答案

【问题标题】：How to align text in a same paragraph in left and right in primevue InlineMessage如何在引导程序中左右对齐同一段落中的文本
【发布时间】：2022-11-24 18:34:58
【问题描述】：

我想使用引导程序左右对齐 2 个文本。

<InlineMessage severity="error" class="my-4 block align-items-center">Error Request Percentage <span class="" > 10%</span> </InlineMessage>

有人能帮我吗？

我尝试使用文本对齐、对齐项目，但似乎没有应用？

【问题讨论】：

标签： bootstrap-5 bootstrap-vue

【解决方案1】：

我假设您想将一个文本向左对齐，将跨度向右对齐？

首先，您需要将block类更改为flex，以便您可以使用flexbox。

然后您需要使用justify-content 实用程序。您可以使用 justify-content-between 类来完成此操作。

如果您没有看到更改，只需添加 w-100 类，以便 <InlineMessage> 元素占用 100% 的可用宽度。

您的代码如下所示：

<InlineMessage severity="error" class="my-4 flex justify-content-between w-100">Error Request Percentage <span class="" > 10%</span> </InlineMessage>

【讨论】：

【解决方案2】：

Bootstrap没有.blockcss定义，可以自己添加，例如：

.block { display: flex; }

并附加到您的在线课程justify-content-center以使其居中。

如果你想使用块然后定义 .block { display: block; } 并附加类 text-center 使文本居中。

否则你的内联和里面的文本一样长，它永远不会对齐

.block { display: flex; }
.block2 { display: block; }

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>


<InlineMessage severity="error" class="my-4 block align-items-center justify-content-center">Error Request Percentage <span class="" > 10%</span> </InlineMessage>



<InlineMessage severity="error" class="my-4 block2 text-center">Error Request Percentage <span class="" > 10%</span> </InlineMessage>

如果我理解正确你希望在内联元素内部以不同方式对齐，那么你可以使用这样的东西：

.block { display: flex; }
.block > span { flex: 1; text-align: right; }

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>


<InlineMessage severity="error" class="my-4 block align-items-center justify-content-left">Error Request Percentage <span class="" > 10%</span> </InlineMessage>

【讨论】：