代码之家  ›  专栏  ›  技术社区  ›  Adam Waring

Bootstrap 4容器的文本包装

  •  0
  • Adam Waring  · 技术社区  · 8 年前

    我正在尝试让标题文本围绕一个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。任何建议都将不胜感激。。。

    1 回复  |  直到 8 年前
        1
  •  0
  •   Chasing Unicorn - Anshu    8 年前

    我知道你的问题,基本上,你使用标签是不正确的。

    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检查器。