Angular 行位于引导3中的同一行

在bootstrap-3中，两行位于同一行。。 这是我的代码，两个人的聊天界面

代码

---

[我认为你的html有问题

您忘记关闭第一行中的样式标记引号
这条线


应该是

<div class="row single-row mt-10" style="float: left !important;">



我想您忘了在文件名parentdiv中添加row类
在此div上方添加一行div
根据您发送的图像，您可以使用以下代码：

<!-- Left-aligned -->
  <div class="media">
   <div class="media-left">
    <img src="images/img1.jpg" class="media-object rounded" style="width:60px" />
   </div>
    <div class="media-body">
         <p>Lorem ipsum...</p>
         <h4 class="date"> 2021-5-22</h4>
    </div>
</div>
 <!-- Right-aligned -->
 <div class="media">
    <div class="media-body">
        <p>Lorem ipsum...</p>
        <h4 class="date"> 2021-5-22</h4>
     </div>
     <div class="media-right">
     <img src="images/img2.jpg" class="media-object rounded" style="width:60px" />
     </div>
 </div>


同侧眼线

2021-5-22
同侧眼线

2021-5-22

//Css


.媒体机构p{
背景：黄绿色；
边界半径：5px；
宽度：适合的内容；
填充：0 5px；
保证金：0；
}
.日期{
颜色：#bbb；
字体大小：11px；
保证金：0；
}
.media、.media主体{
宽度：适合的内容；
}
否，此错误发生在键入时。代码正确无误，文件div上方缺少一行。您检查了吗？是的，没有问题您是否设法解决了HTML问题？
<!-- Left-aligned -->
  <div class="media">
   <div class="media-left">
    <img src="images/img1.jpg" class="media-object rounded" style="width:60px" />
   </div>
    <div class="media-body">
         <p>Lorem ipsum...</p>
         <h4 class="date"> 2021-5-22</h4>
    </div>
</div>
 <!-- Right-aligned -->
 <div class="media">
    <div class="media-body">
        <p>Lorem ipsum...</p>
        <h4 class="date"> 2021-5-22</h4>
     </div>
     <div class="media-right">
     <img src="images/img2.jpg" class="media-object rounded" style="width:60px" />
     </div>
 </div>

 <style>
        .media-body p {
            background: yellowgreen;
            border-radius: 5px;
            width: fit-content;
            padding: 0 5px;
            margin: 0;
        }

        .date {
            color: #bbb;
            font-size: 11px;
            margin: 0;
        }
        .media, .media-body{
            width: fit-content;
        }
    </style>