Question

两行在 bootstrap-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]

我想要这样—— enter image description here

Answer 1

我认为你的 html 有问题

你忘记在第一行关闭样式标签引号这一行

应该

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

我想你忘了在文件名父 div 中添加行类

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

行在 Bootstrap 3 中出现在同一行

2 个答案: