在bootstrap和flex中聊天泡泡？(Chat bubbles in bootstrap and flex?)

在bootstrap和flex中聊天泡泡？(Chat bubbles in bootstrap and flex?)

我需要在引导程序框架中使用代码聊天泡泡，其中我将左右泡沫分为两类，例如right和left 。

每个气泡应该有最大宽度，例如70％，但如果文字不是太大，应该更小。

这是我的代码：

<div class="d-flex flex-column"> <div class="justify-content-end"> <p class="col-6 msg right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque est, viverra ac rhoncus et, cursus eu leo. Quisque in tristique libero, sed rhoncus neque. Ut at enim id ligula consequat tempus in nec magna. Donec vitae libero eget mi malesuada rutrum. Integer ornare ante at ligula venenatis, quis blandit urna euismod. </p> </div> <div class="justify-content-end"> <p class="col-6 msg left">Integer ornare ante at ligula venenatis, quis blandit urna euismod.</p> </div> <div class="justify-content-start"> <p class="col-6 msg right">Integer ornare ante at ligula venenatis, quis blandit urna euismod.</p> </div> <div class="justify-content-end"> <p class="col-6 msg left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque est, viverra ac rhoncus et, cursus eu leo. Quisque in tristique libero, sed rhoncus neque. Ut at enim id ligula consequat tempus in nec magna. Donec vitae libero eget mi malesuada rutrum. Integer ornare ante at ligula venenatis, quis blandit urna euismod. ge</p> </div> <div class="justify-content-start"> <p class="col-6 msg right">Integer ornare ante at ligula venenatis, quis blandit urna euismod.</p> </div> </div>

和CSS

.msg { border-radius: 10px; } .msg.right { background-color:#CCC; } .msg.left { background-color:#555; color: white; }

我也把代码放入jsfiddle中。 我尝试使用justify-content-xxx但它不能如我所料。 你能告诉我如何以更简单的方式做到这一点？ 谢谢你的建议。

https://jsfiddle.net/3a9vhydk/4/

I need code chat bubbles within bootstrap framework where I distinguish right and left bubbles with 2 class, e.g. right and left.

Each bubble should have max width, e.g. 70% but should be less if text isn't too large.

Here is my code:

<div class="d-flex flex-column"> <div class="justify-content-end"> <p class="col-6 msg right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque est, viverra ac rhoncus et, cursus eu leo. Quisque in tristique libero, sed rhoncus neque. Ut at enim id ligula consequat tempus in nec magna. Donec vitae libero eget mi malesuada rutrum. Integer ornare ante at ligula venenatis, quis blandit urna euismod. </p> </div> <div class="justify-content-end"> <p class="col-6 msg left">Integer ornare ante at ligula venenatis, quis blandit urna euismod.</p> </div> <div class="justify-content-start"> <p class="col-6 msg right">Integer ornare ante at ligula venenatis, quis blandit urna euismod.</p> </div> <div class="justify-content-end"> <p class="col-6 msg left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque est, viverra ac rhoncus et, cursus eu leo. Quisque in tristique libero, sed rhoncus neque. Ut at enim id ligula consequat tempus in nec magna. Donec vitae libero eget mi malesuada rutrum. Integer ornare ante at ligula venenatis, quis blandit urna euismod. ge</p> </div> <div class="justify-content-start"> <p class="col-6 msg right">Integer ornare ante at ligula venenatis, quis blandit urna euismod.</p> </div> </div>

and css

.msg { border-radius: 10px; } .msg.right { background-color:#CCC; } .msg.left { background-color:#555; color: white; }

I also put code into jsfiddle. I tried use justify-content-xxx But it doesn't work as I expected. Can you tell me how to do that with much simpler way? Thanks in advice.

https://jsfiddle.net/3a9vhydk/4/

最满意答案

您可以将float：right应用于“右”类，并取出包含div的justify-content位。

我在这里修改了你的小提琴： https ： //jsfiddle.net/Mikkal24/0r5snvxu/

.msg.right { background-color:#CCC; float: right; }

更新版本： https ： //jsfiddle.net/Mikkal24/534kn62w/

注意没有浮动只flex

You can apply a float: right to the 'right' class and take out the justify-content bit on the containing divs.

I modified your fiddle here: https://jsfiddle.net/Mikkal24/0r5snvxu/

.msg.right { background-color:#CCC; float: right; }

Updated Version : https://jsfiddle.net/Mikkal24/534kn62w/

Note no floats only flex

在bootstrap和flex中聊天泡泡？(Chat bubbles in bootstrap and flex?)

我需要在引导程序框架中使用代码聊天泡泡，其中我将左右泡沫分为两类，例如right和left 。

每个气泡应该有最大宽度，例如70％，但如果文字不是太大，应该更小。

这是我的代码：

<div class="d-flex flex-column"> <div class="justify-content-end"> <p class="col-6 msg right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque est, viverra ac rhoncus et, cursus eu leo. Quisque in tristique libero, sed rhoncus neque. Ut at enim id ligula consequat tempus in nec magna. Donec vitae libero eget mi malesuada rutrum. Integer ornare ante at ligula venenatis, quis blandit urna euismod. </p> </div> <div class="justify-content-end"> <p class="col-6 msg left">Integer ornare ante at ligula venenatis, quis blandit urna euismod.</p> </div> <div class="justify-content-start"> <p class="col-6 msg right">Integer ornare ante at ligula venenatis, quis blandit urna euismod.</p> </div> <div class="justify-content-end"> <p class="col-6 msg left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque est, viverra ac rhoncus et, cursus eu leo. Quisque in tristique libero, sed rhoncus neque. Ut at enim id ligula consequat tempus in nec magna. Donec vitae libero eget mi malesuada rutrum. Integer ornare ante at ligula venenatis, quis blandit urna euismod. ge</p> </div> <div class="justify-content-start"> <p class="col-6 msg right">Integer ornare ante at ligula venenatis, quis blandit urna euismod.</p> </div> </div>

和CSS

.msg { border-radius: 10px; } .msg.right { background-color:#CCC; } .msg.left { background-color:#555; color: white; }

我也把代码放入jsfiddle中。 我尝试使用justify-content-xxx但它不能如我所料。 你能告诉我如何以更简单的方式做到这一点？ 谢谢你的建议。

https://jsfiddle.net/3a9vhydk/4/

I need code chat bubbles within bootstrap framework where I distinguish right and left bubbles with 2 class, e.g. right and left.

Each bubble should have max width, e.g. 70% but should be less if text isn't too large.

Here is my code:

<div class="d-flex flex-column"> <div class="justify-content-end"> <p class="col-6 msg right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque est, viverra ac rhoncus et, cursus eu leo. Quisque in tristique libero, sed rhoncus neque. Ut at enim id ligula consequat tempus in nec magna. Donec vitae libero eget mi malesuada rutrum. Integer ornare ante at ligula venenatis, quis blandit urna euismod. </p> </div> <div class="justify-content-end"> <p class="col-6 msg left">Integer ornare ante at ligula venenatis, quis blandit urna euismod.</p> </div> <div class="justify-content-start"> <p class="col-6 msg right">Integer ornare ante at ligula venenatis, quis blandit urna euismod.</p> </div> <div class="justify-content-end"> <p class="col-6 msg left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque est, viverra ac rhoncus et, cursus eu leo. Quisque in tristique libero, sed rhoncus neque. Ut at enim id ligula consequat tempus in nec magna. Donec vitae libero eget mi malesuada rutrum. Integer ornare ante at ligula venenatis, quis blandit urna euismod. ge</p> </div> <div class="justify-content-start"> <p class="col-6 msg right">Integer ornare ante at ligula venenatis, quis blandit urna euismod.</p> </div> </div>

and css

.msg { border-radius: 10px; } .msg.right { background-color:#CCC; } .msg.left { background-color:#555; color: white; }

I also put code into jsfiddle. I tried use justify-content-xxx But it doesn't work as I expected. Can you tell me how to do that with much simpler way? Thanks in advice.

https://jsfiddle.net/3a9vhydk/4/

最满意答案

您可以将float：right应用于“右”类，并取出包含div的justify-content位。

我在这里修改了你的小提琴： https ： //jsfiddle.net/Mikkal24/0r5snvxu/

.msg.right { background-color:#CCC; float: right; }

更新版本： https ： //jsfiddle.net/Mikkal24/534kn62w/

注意没有浮动只flex

You can apply a float: right to the 'right' class and take out the justify-content bit on the containing divs.

I modified your fiddle here: https://jsfiddle.net/Mikkal24/0r5snvxu/

.msg.right { background-color:#CCC; float: right; }

Updated Version : https://jsfiddle.net/Mikkal24/534kn62w/

Note no floats only flex