Чат пузырьками в бутстрапе и флексе?

Question

Мне нужны кодовые пузыри чата в рамках начальной загрузки, где я различаю правый и левый пузыри с помощью 2 классов, например, 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/

Answer 1

Вы можете применить float: right к «правильному» классу и извлечь бит justify-content для содержащихся div.

Я изменил вашу скрипку здесь: https://jsfiddle.net/Mikkal24/0r5snvxu/

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

Обновленная версия: https://jsfiddle.net/Mikkal24/534kn62w/

Примечание только с плавающей запятой flex