Bootstrap 4卡 - 向右浮动

Question

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

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

我希望将邮件向左和向右浮动，具体取决于发件人（因此，如果当前用户是发件人，则该卡将位于右侧）。 但是，我不能让浮子工作。 是否有一个助手班，我可以用左边有一些卡片，有些卡片在右边？

Answer 1

使用ml-auto。这是margin-left:auto;的Bootstrap 4 util，它会将卡推向右边......

https://www.codeply.com/go/FrJrmUxydZ

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

还有float-right，但这会导致卡片相互重叠。