html - 在 bootstrap 列中放置一个 div 将内容推送到新行

Question

我有一条文本消息包装在 bootstrap 列 div 中，我试图通过用另一个 div 包装它来自定义该列中的特定文本，但 bootstrap 将该文本推到一个新行。

<div class="container">
  <div class="row">
         <div class="col">
             Text1
         </div>
         <div class="col">Text2<div>Text3</div></div>
     </div>
</div>

https://jsfiddle.net/e642tsb1/

Answer 1

因为 div 有一个默认属性 display: block; 使得 div 出现在一个新行中。使用 Bootstrap 类 d-inline-block 设置它的 display: inline-block;

然后它将出现在同一行。

.row {
  background: white;
  margin-top: 20px;
}

.col {
  border: solid 1px red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col">
      Text1
    </div>
    <div class="col">Text2
      <div class="d-inline-block">Text3</div>
    </div>
  </div>
</div>