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项添加margin-left css属性。我的意思是div.row或div.chat。

Answer 2

制作你的后端API，你可以确定你发送的消息的天气，或者你收到一条消息，然后制作两个不同的div，其中diff类为发送者，另一个为接收者，为{c}提供css，如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>

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

3 个答案: