Question

我试图获取标题文本以包裹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.任何建议都将非常感谢......

Answer 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检查程序。

Bootstrap 4文本包装容器

1 个答案: