Twitter bootstrap 引导4张卡-向右浮动

我正在尝试使用card元素为我的应用程序创建聊天用户界面。 这是我正在使用的循环：

{% for message in messages %}
        <div class="card w-50">
            <div class="card-body">
                {{ message.content }}
            </div>
        </div>
{% endfor %}

我希望根据发送者的不同，将消息左右浮动，因此如果当前用户是发送者，则卡片将位于右侧。 然而，我无法让浮子工作。 有没有一个助手类可以让我在左边有一些卡片，在右边有一些卡片？

使用ml auto。这是一个用于左边距的引导4 util:auto；这将把卡推向右边

也有右浮动，但这会导致卡相互重叠。

使用ml auto。这是一个用于左边距的引导4 util:auto；这将把卡推向右边

也有浮动的权利，但这将导致卡重叠彼此

    <div class="ml-auto card w-50">
        <div class="card-body">
            {{ message.content }}
        </div>
    </div>