如何显示发件人消息右侧和接收器消息左侧Laravel

Question

您好，我是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>

我的控制器

$result=DB::table('messages')
                  ->join('user_register','messages.sendermsgid','=','user_register.id')
                  ->where('sendermsgid', $senderid)->where('receivermsgid',$receivermsgid)
                  ->orwhere('sendermsgid',$receivermsgid)->where('receivermsgid',$senderid)
                  ->select('messages.message','messages.sendermsgid','messages.receivermsgid','user_register.first_name as name')
                  ->orderby('messages.sdate','desc')
                  ->get();
 return view('users.messageschat')->with('data1',$result);

我面临像这样的错误

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

Answer 1

向每个row chat项目添加保证金左侧CSS属性。我的意思是Div.Row或Div.Chat。

Answer 2

使您的后端API像您可以确定的天气，或者收到消息，然后通过发送者和其他接收者的diff class One进行两个不同都喜欢float:left和float: right

Answer 3

或只是更改视图，然后将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>