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

你好朋友我是laravel中的新成员，并且我在消息模块上工作。我得到两个用户之间的所有消息交谈。但我希望发送者消息显示在右侧，接收者消息在左侧。如何在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

来源

2017-05-31 Tarang patel

一个利润率左CSS属性添加到每个row chat项目。我的意思是div.row或div.chat。

来源

2017-05-31 05:04:22 sensorario

谢谢主席先生@sensorario –

让你的后端API一样，你可以判断天气消息被发送或收到随后的消息令与DIFF类一两个不同的div发送者和其他接收机使CSS的都喜欢float:left和float: right

来源

2017-05-31 05:09:09

或者只是改变了看法，并添加一个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>

来源

2017-05-31 05:33:02 linktoahref

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

回答

相关问题