时间戳

首页 > 解决方案 > Bootstrap 导航栏在调整为移动设备大小时堆叠并隐藏内容

html - Bootstrap 导航栏在调整为移动设备大小时堆叠并隐藏内容

问题描述

我有一个标准的 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 都出现在堆叠的导航栏下方。

标签： htmlcsstwitter-bootstrap

解决方案

一种方法是为不同的设备/分辨率（即移动/桌面）使用不同的填充值。在此处查看文档：https ://getbootstrap.com/docs/3.4/css/#grid-media-queries

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

所以你可以这样做，例如

.body-content {
    padding-top: 100px; /* more space under the menu */
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {
    .body-content {
        padding-top: 50px; /* less space under the menu */
    }
}

推荐阅读