页面上的Split 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

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

＆＃13;

＆＃13;

small {
display: block;  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;