引导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;的引导程序4，它会把卡推到右边.

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

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

也有float-right，但这将导致卡重叠彼此。