在调整页面大小时拆分 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>

没有达到我想要的效果（它在文本之间放置了一个视觉效果 'split'，但我希望它们具有统一覆盖它们的白色背景）。

Answer 1

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

small {
display: block;  
}

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

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

Split Bootstrap row on page resize

html

css

resize

twitter-bootstrap