如何阻止浮动元素向右过度扩展引导行？

Question

我是网络开发新手。使用bootstrap 4网格系统。

我有一行包含标题和面包屑。我想将面包屑浮动到行的右侧，但是当我这样做时，它似乎过度扩展了行，导致它显示在两行上。

如何阻止它这样做。

以下是我正在使用的代码：

<!-- PAGE TITLE AND BREADCRUMBS   -->
<div class="container" style="padding-top:10px; padding-bottom:0px">
  <div class="row rounded" style="background-color:#409ad4">
    <div class="col-sm-12">
      <h1>title</h1>
      <ol class="breadcrumb float-sm-right" style="background-color:#f5f5f5">
        <li class="breadcrumb-item" style="font-size: 19px"><a href="#">News Channels</a></li>
        <li class="breadcrumb-item" style="font-size: 19px">Prayer Channel</li>
      </ol>
    </div>
  </div>
  <!-- Bottom container div -->
</div>

以下是问题的屏幕截图：

Answer 1

这是因为<h1>标记是块级元素，因此默认情况下将扩展为父级的100％宽度。您可能希望定义2列 - 一列用于标题，另一列用于面包屑。