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。这是一个Bootstrap 4实用程序margin-left:auto;，它将把卡推向右侧...

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

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

还有，float-right但这会导致卡彼此重叠。