Question

我需要在bootstrap框架中使用代码聊天气泡，我将左右气泡区分为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应用于'right'类，并取出包含div的justify-content位。

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

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

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

注意没有花车只有flex

在bootstrap和flex中聊天气泡？

1 个答案: