css - 使用 boostrap 将下一行设置为上一行

Question

我正在做一个带有私人消息功能的个人项目。

如果发送消息的用户是已登录的用户，则如果不在左侧，则消息将出现在右侧。目前，最近的消息显示在卡片的顶部，因为对于每条消息，我都会创建一行。我想要的是，当我用消息创建一行时，它被放置在卡片的顶部，并且下面的卡片（因此下面的消息）上升到前一个消息而不是下降。这可能与 bootstrap 吗？

我正在尝试的示例：

我实际上的例子：

我正在使用 Laravel 和引导程序。这是我的代码：

@foreach($messages as $message)
    @if($message->user_id == auth()->user()->id)
        <!-- Si le message a été écris par la personne connectée -->
        <div class="row px-0 mx-0 mb-2">
            <div class="col-md-6 offset-md-6 " >
                <div class="card text-white bg-primary">
                    <div class="card-body">
                        {!! $message->body !!}
                        <div class="text-end">
                            <small><span class="ms-2">{{ $message->created_at->diffForHumans() }}</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    @else
        <!-- Si le message ne vient pas de la personne qui est connectée -->
        <div class="row px-0 mx-0 mb-2">
            <div class="col-md-6">
                <div class="card text-black bg-light">
                    <div class="card-body" id="data-wrapper">
                        {!! $message->body !!}
                        <div class="text-end">
                            <small class="text-muted" ><span class="ms-2">{{ $message->user->name }} - {{ $message->created_at->diffForHumans() }}</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endforeach

标签： csslaraveltwitter-bootstrap