容器的 Bootstrap 4 文本换行答案

【问题标题】：Bootstrap 4 text wrapping for containers容器的 Bootstrap 4 文本换行
【发布时间】：2018-04-07 21:13:47
【问题描述】：

我正在尝试让标题文本环绕一个 span 对象，到目前为止，我已经设法让它在我想要的所有东西的位置对齐，但我无法让最后一部分（环绕）服从......我怀疑这与文本在不同容器中的方式有关，但如果我删除容器，它会打乱其余的格式，

<div class="row px-3">
  <div class="jumbotron">
    <span class="float-right d-flex ">
      <div class="align-self-center mr-1">Submitted by</div>
      <div class="btn-group">
        <button class="btn">User</button>
        <button class="btn btn-info"></button>
        <button class="btn btn-danger"></button>
     </div>
   </span>
   <h1 class="d-flex">
     <div id="title">A very long post title that needs to be long enough to see if the wrapping is working or not</div>
   </h1>
   <div id="body">a short body underneath the title</div>
  </div>
</div>

JSFiddle of example code

正如标题所示，我正在使用 bootstrap 4。任何建议将不胜感激......

【问题讨论】：

I am trying to get title text to wrap around a span object 你是什么意思？你能显示结果的截图吗
如果你看一下 jsfiddle 就更清楚了，span 的文本和内容就像是两个并排的盒子，但这不是我想要的......

标签： css formatting bootstrap-4 styling

【解决方案1】：

我得到了您的问题，基本上，您对标签的使用不正确。

Element div not allowed as child of element span/h1 in this context.

检查小提琴链接，它可以解决您的问题。 Fiddle

<div class="row px-3">
    <div class="jumbotron">
        <div class="float-right">
            <div class="">Submitted                   by
            </div>
            <div class="btn-group">
                <button class="btn">User</button>
                <button class="btn btn-info"></button>
                <button class="btn btn-danger"></button>
            </div>
        </div>
    <p id="editor-title">A very long post title that   needs to be long enough to see if the wrapping is working or not sdjfs dakjsd askjdhas dkjashd asdjkhasd askjdhas dasjdasdkjasd asdkjhasd djkf dfuieywrbewrgew weruwe</p>
    <div id="editor-body">a short body underneath the   title</div>
    </div>
</div>

我建议你使用 W3C HTML 检查器。

【讨论】：