Html 在引导列中放置一个div将内容推送到新行

我将一条文本消息包装在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>

文本1
Text2Text3

---

将您的内饰

div

更改为

span

，它将显示在同一行：

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

文本1
文本2文本3

默认情况下，

div

是一个块级元素，这意味着它的内容将占据整个页面的宽度，因此任何子

div

都将这样做。这是你最新的小提琴：

---

将您的内饰

div

更改为

span

，它将显示在同一行：

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

文本1
文本2文本3

默认情况下，

div

是一个块级元素，这意味着它的内容将占据整个页面的宽度，因此任何子

div

都将这样做。这是你最新的小提琴：

---

其原因是

div

具有默认属性

display:block

使

div

显示在新行中。使用引导类

d-inline-block

设置其

显示：inline块

然后它将出现在同一行中


.row{
背景：白色；
边缘顶部：20px；
}
上校{
边框：实心1px红色；
}

文本1
文本2
文本3
其原因是
div
具有默认属性
display:block
使
div
显示在新行中。使用引导类
d-inline-block
设置其
显示：inline块

然后它将出现在同一行中


.row{
背景：白色；
边缘顶部：20px；
}
上校{
边框：实心1px红色；
}

文本1
文本2
文本3
没错，它会发生的

Text2
将把
Text3
推到下一行，因为div是
block
元素

块级元素总是从新行开始并占用
全宽可用（尽可能向左和向右延伸
可以）

最好使用
或给出
显示：内联块属性添加到包含Text3的内部
div

学习CSS中的不同显示类型。
这是真的，它会发生

Text2
将把
Text3
推到下一行，因为div是
block
元素

块级元素总是从新行开始并占用
全宽可用（尽可能向左和向右延伸
可以）

最好使用
或给出
显示：内联块属性添加到包含Text3的内部
div

学习CSS中的不同显示类型。
div元素是块级元素。块级元素始终从新行开始，并占据可用的全部宽度。可以将span元素用作内联元素。内联元素不从新行开始，只占用所需的宽度

解决方案1：将div元件替换为span元件

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


文本1
Text2Text3

解决方案2：设置div元素的样式以显示为内联元素（不推荐）


文本1
Text2Text3
div元素是块级元素。块级元素始终从新行开始，并占据可用的全部宽度。可以将span元素用作内联元素。内联元素不从新行开始，只占用所需的宽度

解决方案1：将div元件替换为span元件

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


文本1
Text2Text3

解决方案2：设置div元素的样式以显示为内联元素（不推荐）


文本1
Text2Text3