in application.scss
.message-sent {
position: relative;
background-color: #FFFF00;
border-color: #BCE8F1;
margin: 5px 20px;
padding: 10px;
float: right;
}
.message-received {
background-color: #F1F0F0;
border-color: #EEEEEE;
margin: 5px 20px;
padding: 10px;
float: left;
}
在视图/消息/_message.html.erb
<li>
<div class="row">
<div class="<%= user.id == message.user_id ? 'message-sent' : 'message-received' %>">
<%= message.body %>
</div>
</div>
</li>
在视图/对话/_conversation.html.erb
<li>
<div class="panel panel-default" data-conversation-id="<%= conversation.id %>">
<div style="font-size: 15px; height: 30%;" class="badge badge-pill badge-success">
<%= link_to conversation.opposed_user(user).nickname, '', class: 'toggle-window' %></div>
<%= link_to "x", close_conversation_path(conversation), class: "btn btn-default btn-xs pull-right", remote: true, method: :post %>
<div class="panel-body" style="display: none;">
<div class="messages-list">
<ul>
<%= render 'conversations/conversation_content', messages: conversation.messages, user: user %>
</ul>
</div>
<form class="new_message">
<input name="conversation_id" type="hidden" value="<%= conversation.id %>">
<input name="user_id" type="hidden" value="<%= user.id %>">
<textarea name="body" class="form-control"></textarea>
<input style="font-size: 13px; height: 30%;" type="submit" class="btn btn-warning" value="전송">
</form>
</div>
</div>
</div>
</li>
* 我从轨道到行动电缆进行了实时聊天。 我在聊天窗口的右侧发送消息。 我希望接收消息出现在左侧。 在教程中这是可能的。 但它不会在我的项目中 所有聊天都显示在左侧。 这似乎不是scss的问题。 如果您在 scss 中修改颜色是正确的 如果您需要其他代码，请通过评论告诉我。
错误页面中的铬浏览器(F12(
<!DOCTYPE html>
<html>
<head>
<title>Univ. Community Prototype</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="UNQR3pfc6IF9oi+Wp3fgdvvJSJNQ1AXgrX6R1uroKEtyVyJqyOLxCQ+WEp9wPfca0xfz9DDsOIO9rOMAQ0kfTw==" />
<link rel="stylesheet" media="all" href="/assets/application.self-607424cb77179d6e129430471baf980e5ad301867ac29c26b26d7212ad5f08ff.css?body=1" />
<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
<script src="/assets/bootstrap.self-9acfc28c4d35348d353eb47afc72c287bc271ea4f7e8c9b05f2f9554ddc3f202.js?body=1"></script>
<script src="/assets/bootstrap/util.self-5ae5b599fc2afe0f317696c5dfc0b51d6ce2ecb47d0341d1555b2fe971ada496.js?body=1"></script>
<script src="/assets/bootstrap/alert.self-5a586b490b4c9332249b231956b361b852b128a0d82f7f08549f205bba1bfeb0.js?body=1"></script>
<script src="/assets/bootstrap/button.self-30412f39aaa761313878531076ce8187fe6c017e42111bf2c283fce4a7c850f8.js?body=1"></script>
<script src="/assets/bootstrap/carousel.self-f18afa468f85125228747ec83e00e56a26bbc71295e90a3848af25b258445615.js?body=1"></script>
<script src="/assets/bootstrap/collapse.self-94c7455a70c5bb5ad5b3eae0c70388160c238afdea0b48d5345587fd176fb52d.js?body=1"></script>
<script src="/assets/bootstrap/dropdown.self-954f8384ac380992dd91b2b176b570b0792365a334efb758774c718d9628a329.js?body=1"></script>
<script src="/assets/bootstrap/modal.self-a406636221efb5add01fbaa60c24ac0ae6bc0c57008d8e2503d68f49fbe75ad0.js?body=1"></script>
<script src="/assets/bootstrap/scrollspy.self-66781adda319363e67c65edfc73459411bd3948c0f32efddbc9928b810d5abf4.js?body=1"></script>
<script src="/assets/bootstrap/tab.self-e3abc2817f699a2be95f78a4aff190ef7669d5590adbacd0c08867eb34ed16c6.js?body=1"></script>
<script src="/assets/bootstrap/tooltip.self-dd8a9f3fa1f9fc58df30c7ed9a17dfc7303b812d72640899beee03609124b426.js?body=1"></script>
<script src="/assets/bootstrap/popover.self-7d459fac34d4d96fd9d6da8efcd40dee55b66579a24ddcebf0a355c82dcad7e0.js?body=1"></script>
<script src="/assets/bootstrap-sprockets.self-636159b35205da4142a43bc02d2849d77d3ac07a0946211585cde15a9c6ff21f.js?body=1"></script>
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script>
<script src="/assets/tinymce/preinit.self-78bfc36da60c92b71799c55e0d8c68780f19caf3cf4e4e0e3bca8c9014a0d83d.js?body=1"></script>
<script src="/assets/tinymce/tinymce.self-b5596bc02a735dc0e7ad551e4a88ecf812f3ab6a8f4355441b3481d869393199.js?body=1"></script>
<script src="/assets/tinymce.self-75a11da44c802486bc6f65640aa48a730f0f684c5c07a42ba3cd1735eb3fb070.js?body=1"></script>
<script src="/assets/tinymce/jquery.tinymce.self-c4e34b289f498e7a8e4ff16c48b895310113eae7c296ac5f17680704bc3a0032.js?body=1"></script>
<script src="/assets/tinymce-jquery.self-6a3cf5192354f71615ac51034b3e97c20eda99643fcaf5bbe6d41ad59bd12167.js?body=1"></script>
<script src="/assets/bulletins.self-2abc19c26ebbf605174fbef79b9fbc2861869c60e15935e80dffcad48cabad9f.js?body=1"></script>
<script src="/assets/action_cable.self-be3674a79bb9d13d41d259b2c17fad23aef20946dab3603b9d02374ea795005f.js?body=1"></script>
<script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1"></script>
<script src="/assets/channels/conversation.self-cff6155dee216e5740d8b35a8bf334e29e4397a573cf1c5e28f292e5c0f95032.js?body=1"></script>
<script src="/assets/comments.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js?body=1"></script>
<script src="/assets/home.self-19a187bec6cdb96d6de80a61c16c857c613536adf9138476bd367db38d282635.js?body=1"></script>
<script src="/assets/knu.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js?body=1"></script>
<script src="/assets/likes.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js?body=1"></script>
<script src="/assets/members.self-19a187bec6cdb96d6de80a61c16c857c613536adf9138476bd367db38d282635.js?body=1"></script>
<script src="/assets/messages.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js?body=1"></script>
<script src="/assets/posts.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js?body=1"></script>
<script src="/assets/reports.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js?body=1"></script>
<script src="/assets/talks.self-19a187bec6cdb96d6de80a61c16c857c613536adf9138476bd367db38d282635.js?body=1"></script>
<script src="/assets/application.self-1915efa258d754c8135929322b965317324ccca7ec8d68cc7c42e5f9019e998a.js?body=1"></script>
<!-- jquery, 드랍박스 활성화 -->
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/drop-down.js"></script>
<!-- 카카오톡 썸네일 -->
<meta property="og:image" content="/img/op_thum.png">
<!-- 개인 CSS / JS -->
<link rel="stylesheet" href="/css/image-box.css">
<link rel="stylesheet" href="/css/customize.css">
<script type="text/javascript" src="/js/count_down.js"></script>
<!-- 부트스트랩 CDN, AWESOME 폰트 CDN -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="//v4-alpha.getbootstrap.com/assets/css/docs.min.css">
<!-- 상단 메뉴 관련 -->
<link rel="stylesheet" type="text/css" href="/css/header_menu.css">
<script src="/js/highlight.min.js"></script>
<script src="/js/tether.min.js"></script>
<script src="/js/theme.min.js"></script>
</head>
<body style="margin: 0px 0px 0px 0px">
<div class="header">
<!-- Navigation 상단 메뉴 -->
<nav class="navbar navbar-inverse bg-transparent navbar-toggleable-md fixed-top" role="navigation">
<div class="container no-override">
<button class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="/"><img style="width: 150px;" src="/img/logo.png" alt="Logo" /></a>
<div class="collapse navbar-collapse justify-content-end" id="navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="/bulletins">카테고리 설정</a></li>
<li class="nav-item dropdown">
<a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">게시판 <i class="fa fa-angle-down" aria-hidden="true" style="font-size: 15px;"></i></a>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="/bulletins/1/posts">자유게시판</a>
<a class="dropdown-item" href="/bulletins/2/posts">피드백 게시판</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="/home/update">Admin</a></li>
<li class="nav-item"><a class="nav-link" href="/home/git"><i class="fa fa-github-alt" aria-hidden="true" style="font-size: 15px;"></i> Git!</a></li>
<li class="nav-item"><a class="nav-link" href="#">장식메뉴2</a></li>
<li class="nav-item"><a class="nav-link" href="/talks/index">쪽지함가기</a></li>
<li class="nav-item"><a href="/users/edit" class="nav-link board_nickname_etc"><i class="fa fa-id-card-o" aria-hidden="true" style="font-size: 15px;"></i> 나야나</a></li>
<li class="nav-item"><a class="nav-link nav-link--rounded" data-method="delete" href="/users/sign_out">로그아웃</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!-- Navigation 상단메뉴 종료 -->
<div class="board" style="background: url('/img/title_img_1.png') no-repeat center center/cover scroll;"><span style="color: white; background:rgba(0,0,0,0.6); padding: 10px; border-radius: 10px;"></span></div>
<div class="row">
<div class="col-md-9">
<ul id="conversations-list">
<span style="height: 40%;" class="badge badge-pill badge-info"> </span> : 아이디를 누르면 채팅창이 열립니다.
<li>
<div class="panel panel-default" data-conversation-id="2">
<div style="font-size: 15px; height: 30%;" class="badge badge-pill badge-success">
<a class="toggle-window" href="">선풍기</a></div>
<a class="btn btn-default btn-xs pull-right" data-remote="true" rel="nofollow" data-method="post" href="/conversations/2/close">x</a>
<div class="panel-body" style="display: none;">
<div class="messages-list">
<ul>
<li>
<div class="row">
<div class="message-sent">
sadsd
</div>
</div>
</li>
</ul>
</div>
<form class="new_message">
<input name="conversation_id" type="hidden" value="2">
<input name="user_id" type="hidden" value="3">
<textarea name="body" class="form-control"></textarea>
<input style="font-size: 13px; height: 30%;" type="submit" class="btn btn-warning" value="전송">
</form>
</div>
</div>
</li>
<span style="height: 40%;" class="badge badge-pill badge-info"> </span> : 아이디를 누르면 채팅창이 열립니다.
<li>
<div class="panel panel-default" data-conversation-id="3">
<div style="font-size: 15px; height: 30%;" class="badge badge-pill badge-success">
<a class="toggle-window" href="">냉장고</a></div>
<a class="btn btn-default btn-xs pull-right" data-remote="true" rel="nofollow" data-method="post" href="/conversations/3/close">x</a>
<div class="panel-body" style="display: none;">
<div class="messages-list">
<ul>
<li>
<div class="row">
<div class="message-sent">
asdsad
</div>
</div>
</li>
<li>
<div class="row">
<div class="message-sent">
하하하
</div>
</div>
</li>
</ul>
</div>
<form class="new_message">
<input name="conversation_id" type="hidden" value="3">
<input name="user_id" type="hidden" value="3">
<textarea name="body" class="form-control"></textarea>
<input style="font-size: 13px; height: 30%;" type="submit" class="btn btn-warning" value="전송">
</form>
</div>
</div>
</li>
</ul>
</div>
<div class="col-md-3">
<h3 class="alert alert-success" role="alert">쪽지 보내기</h3>
<div class="alert alert-warning" role="alert">
<ul>
<div><li><span style="font-size: 13px;" class="badge badge-pill badge-success"><a data-remote="true" rel="nofollow" data-method="post" href="/conversations?user_id=1">선풍기</a></span></li></div>
<div><li><span style="font-size: 13px;" class="badge badge-pill badge-success"><a data-remote="true" rel="nofollow" data-method="post" href="/conversations?user_id=2">냉장고</a></span></li></div>
<div><li><span style="font-size: 13px;" class="badge badge-pill badge-success"><a data-remote="true" rel="nofollow" data-method="post" href="/conversations?user_id=4">Sjeisjd</a></span></li></div>
</ul>
</div>
<span class="badge badge-pill badge-info"> </span> : 닉네임을 누르면 메세지를 전송할 수 있습니다.
</div>
</body>
</html>这个问题可以用一些HTML来解决。只需将其放在两个浮点数下方，如下所示：
<your right float div>
<your left float div>
<div style="clear: both;"></div>