html - 在页面调整大小时拆分 Bootstrap 行

Question

当页面调整到更小的宽度时，我试图将一行分成两行。

现在我的 HTML 看起来像这样:

<div class="container-fluid">
    <!-- header -->

    <div class="row">
        <h1 class="text-center top"> Text text <small> more text!</small> </h1>
    </div>
...

理想情况下，我想拆分 <small>部分并将其置于 <h1> 的其余部分下方当页面宽度变小时。

尝试按照以下方式做事:

<div class="row">
    <div class="col-md-6"><h1> Text text</h1></div>
    <div class="col-md-6"><h1> <small>more text!</small></h1></div>
</div>

没有达到我想要的效果(它在文本之间放置了一个视觉“分割”，但我希望它们有一个白色背景，均匀地覆盖它们)。

Answer 1

为什么不将小文本显示为 block ？

small {
display: block;  
}

<div class="row">
        <h1 class="text-center top"> Text text <small> more text!</small> </h1>
    </div>