如何停止浮动元素向右过度扩展 bootstrap 行？

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> 标签是块级元素，因此默认情况下会扩展到 parent 的 100% 宽度。您可能想要定义 2 列 - 一列用于标题，另一列用于面包屑。

如何停止浮动元素向右过度扩展 bootstrap 行？

How to stop floating element to right overextending bootstrap row?

twitter-bootstrap

bootstrap-4