Boostrap 4崩溃：标题和徽章不在同一行

Question

考虑此boostrap 4崩溃（https://codepen.io/jaysarf/pen/xxKNKvX）：

&year

我希望标题和徽章在同一行上，但仅，如果标题在同一行上。我几乎可以实现我想要的，但是无论我尝试什么，总会有问题。任何帮助将不胜感激。

好：enter image description here

好：enter image description here

不好：enter image description here

好：enter image description here

非常感谢！对不起，我的英语...

Answer 1

可以通过 flexbox 来实现。

HTML结构需要稍作更改：

<h5 class="card-header">
    <a data-toggle="collapse" href="#collapse-example" aria-expanded="true" 
        aria-controls="collapse-example" class="card-header-collapse">
        <span class="card-header-title">
            This is a loooooooooooooooooooooooooooooooooooooooong collapsible title
        </span>
        <span class="card-header-badge">
            <span class="badge badge-success">This is a pretty loooooong badge text</span>
            <i class="fa fa-chevron-down"></i>
        </span>
    </a>
</h5>

然后，您可以应用CSS将.card-header-collapse设置为 flexbox ：

.card-header-collapse {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.card-header-badge {
    margin-left: auto;
}

演示： This

屏幕截图

https://jsfiddle.net/davidliang2008/avrp6j9f/8/