如何阻止浮动元素到正确的过度引导行？

Question

我是web dev的新手。使用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列 - 一个用于标题，另一个用于面包屑。