Php 如何在laravel中显示发送方消息右侧和接收方消息左侧

朋友们好，我是拉拉维尔的新成员，我从事信息模块的工作。我获取两个用户之间的所有消息和对话。但我希望发送方消息显示在右侧，接收方消息显示在左侧

我的查看页面。

<div class="section-content">
  <?php foreach($data1 as $row){?>
  <div class="row chat">
    <div class="col-md-6">
      <div class="bubble1 me" style="color:black"><p><?php echo $row->message;?></p>
      </div>
    </div>
  </div>
  <div class="row chat">
    <div class="bubble you" style="color:white"><p><?php echo $row->message;?></p></div>
  </div><?php }?> 
</div>

我面临这样的错误

我想这样显示我的聊天记录

---

将左边距css属性添加到每个

行聊天

项。我的意思是div.row或div.chat。

使您的后端API像这样，您可以确定消息是由您发送的还是您收到的，然后使用diff class创建两个不同的div，一个用于发送方，另一个用于接收方，两个都使用css，如

float:left

和

float:right

，或者只需更改视图并添加

col-md-6

到您所在的行

<div class="section-content">
    <?php foreach($data1 as $row){?>
        <div class="row chat">
            <div class="col-md-6"></div>
            <div class="bubble1 me col-md-6" style="color:black"><p><?php echo $row->message;?></p></div>
        </div>
        <div class="row chat">
            <div class="bubble you col-md-6" style="color:white"><p><?php echo $row->message;?></p></div>
            <div class="col-md-6"></div>
        </div>
    <?php }?>
</div>

Receiver Messages
                       Sender Messages
Receiver Messages
                       Sender Messages
Sender  Messages     
                       Receiver Messages 

   Receiver Messages
                           Sender Messages
   Receiver Messages
                           Sender Messages
   Receiver Messages     
                           Sender Messages
   Receiver Messages 
                           Sender Messages

<div class="section-content">
    <?php foreach($data1 as $row){?>
        <div class="row chat">
            <div class="col-md-6"></div>
            <div class="bubble1 me col-md-6" style="color:black"><p><?php echo $row->message;?></p></div>
        </div>
        <div class="row chat">
            <div class="bubble you col-md-6" style="color:white"><p><?php echo $row->message;?></p></div>
            <div class="col-md-6"></div>
        </div>
    <?php }?>
</div>