Html 引导导航栏在调整到移动大小时堆叠和隐藏内容

我有一个标准的BS固定导航条，后面是一个容器流体。导航栏有4列，每列有不同的背景色

当我将浏览器窗口调整为尽可能小时，4列垂直堆叠

这意味着某些内容隐藏在堆叠的列下面

我知道在使用导航栏时，应该使用padding top，这是可行的，但我不希望将padding top设置为较大的值，因为当页面最大化/不是移动大小时，它会产生较大的间隙

<div class="navbar navbar-inverse navbar-fixed-top custom-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 first"></div>
            <div class="col-sm-3 second"></div>
            <div class="col-sm-3 third"></div>
            <div class="col-sm-3 fourth"></div>
        </div>
    </div>
</div>

<div class="container-fluid body-content">
    <div class="row">
        <div class="col-sm-12">
            <h1 class="pull-left">This text is hidden when window resized to small width</h1>
            <h2 class="pull-right">This text is still displayed</h2>
        </div>
    </div>
</div>

当窗口调整为小宽度时，此文本隐藏
此文本仍然显示

---

最终目标是使h1和h2都显示在堆叠导航栏下方。

一种方法是为不同的设备/分辨率（即移动/桌面）使用不同的填充值。请查看此处的文档：

/*超小型设备（电话，小于768px）*/
/*没有媒体查询，因为这是引导中的默认设置*/
/*小型设备（平板电脑、768px及以上）*/
@媒体（最小宽度：@screen sm min）{…}
/*中型设备（台式机、992px及以上）*/
@媒体（最小宽度：@screen md min）{…}
/*大型设备（大型台式机，1200像素及以上）*/
@媒体（最小宽度：@screen lg min）{…}

例如，你可以这样做

。正文内容{
顶部填充：100px；/*菜单下有更多空间*/
}
/*中型设备（台式机、992px及以上）*/
@介质（最小宽度：@screen-md-min）{
.正文内容{
顶部填充：50px；/*减少菜单下的空间*/
}
}

当你说隐藏时，你的意思是你必须向下滚动才能看到h1和h2，或者它是完全隐藏的（在导航栏后面）？你能为手机/平板电脑/桌面使用不同的填充值来解决这个问题吗？h1在我的后面navbar@Tibbelit也许，但不知道怎么做，不太精通BST，我应该提到我使用的是BS3.4，但这仍然适用吗？是的，samt概念适用-我已经更新了代码以匹配Bootstrap v3.4的文档最后的问题-@screen md min的变量少吗？我可以改用实际值吗？我可以使用公式lile>和<？是的，你可以“像往常一样”使用媒体查询以及引导自己的变量，例如，请参见此处（或仅谷歌）：