Bootstrap 3中的行位于同一行

Question

引导程序-3中有两行在同一行。。这是我的代码聊天屏幕的两个人

代码

[<div class="row single-row mt-10" style="float: left !important;>
<div class="col-2" style="margin: auto; background-color: silver; padding-left: 6px; padding-right: 0px !important;">
<div class="profile-container">
<img [src]="address"
style="width: 40px; height: 40px;" />
</div>
</div>
<div class="col-10">
<div class="row">
<span class="clr-col-12 msg_time"> 
{{date : 'MMM d, y h:mm a' }}
</span>     
</div>                                
<div class=" row mb-10 msg_cotainer">
{{m?.messageText}}
</div>
<div class="col-12" *ngIf="file">
<span>File name</span>
</div>
</div>
</div>][1]

我想要这样--在此处输入图像描述

Answer 1

我认为你的html 有问题

1. 您忘记在第一行关闭样式标记引号这条线路

应为

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

2. ，我想您忘记在文件名parentdiv中添加行类了

在这个div 上面添加一行div

Answer 2

根据您发送的图像，您可以使用以下代码：

<!-- 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>

//Css

<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>