如何在Bootstrap Vue中实现ul li列表从右到左排列？

我正在使用Bootstrap Vue创建布局，需要将右侧红色块中的ul/li内容从右到左排列（右对齐），尝试使用相关属性未生效。

当前代码如下：

<b-card class="book-room" style="height:85px">
  <b-row>
    <b-col cols="5" style="justify-content: left">
      <ul style="list-style: none; margin-left: -45px; margin-top:-10px">
        <li style="font-size: 10px; color: #b5b5c3">NHẬN PHÒNG</li>
        <li style="font-weight: 700; font-size: 16px; color: #111827">
          22/10/2022
        </li>
        <li style="font-size: 12px; color: #6b7280">12:00</li>
      </ul>
    </b-col>

    <b-col cols="2" class="col-moon">
      <!-- icon -->
      <b-icon icon="moon"></b-icon>2
    </b-col>

    <b-col cols="5" style="justify-content: right">
      <ul style="list-style: none; margin-left: 26px; margin-top:-10px;">
        <li style="font-size: 10px; color: #b5b5c3;">TRẢ PHÒNG</li>
        <li style="font-weight: 700; font-size: 16px; color: #111827">
          24/10/2022
        </li>
        <li style="font-size: 12px; color: #6b7280">23:59</li>
      </ul>
    </b-col>
  </b-row>
</b-card>

解决方案 #

问题核心是<b-col>默认不是Flex容器，justify-content属性无法生效；同时右侧ul未设置文本右对齐样式。修改方式如下：

1. 给左右两侧的<b-col>添加Flex布局属性，控制内容的对齐方向
2. 调整右侧ul的边距和文本对齐样式，确保内容靠右排列

修改后的完整代码：

<b-card class="book-room" style="height:85px">
  <b-row>
    <b-col cols="5" style="display: flex; justify-content: flex-start;">
      <ul style="list-style: none; margin-left: -45px; margin-top:-10px">
        <li style="font-size: 10px; color: #b5b5c3">NHẬN PHÒNG</li>
        <li style="font-weight: 700; font-size: 16px; color: #111827">
          22/10/2022
        </li>
        <li style="font-size: 12px; color: #6b7280">12:00</li>
      </ul>
    </b-col>

    <b-col cols="2" class="col-moon">
      <!-- icon -->
      <b-icon icon="moon"></b-icon>2
    </b-col>

    <b-col cols="5" style="display: flex; justify-content: flex-end;">
      <ul style="list-style: none; margin-top:-10px; width: 100%; text-align: right;">
        <li style="font-size: 10px; color: #b5b5c3;">TRẢ PHÒNG</li>
        <li style="font-weight: 700; font-size: 16px; color: #111827">
          24/10/2022
        </li>
        <li style="font-size: 12px; color: #6b7280">23:59</li>
      </ul>
    </b-col>
  </b-row>
</b-card>

关键修改点说明 #

• 给<b-col>添加display: flex使其成为Flex容器，justify-content: flex-end让右侧列的内容整体靠右
• 右侧ul设置width:100%确保占满列宽，text-align:right让列表内的文本右对齐，同时移除多余的margin-left避免偏移

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