css - 在桌面上居中标题但在移动设备上全屏宽度标题

Question

我在一个容器中有一个简单的 Bootstrap 3 站点，所以整个内容都居中，左右边距自动。

在移动设备上，我需要页眉占据屏幕的整个宽度作为背景颜色，但页眉的内容( Logo 、导航)需要与其他所有内容(如页面内容)垂直对齐。

我的结构是:

.container
    header.row
        .logo.col-md-8
        .navigation.col-md-8
    /header.row
    .row
        .content.col-md-16
    /.row
    ...
/.container

Answer 1

如果您希望页眉全宽，则必须将其移出容器类并应用一个自定义类，使其在大屏幕上居中，在小屏幕上 100%。为此使用媒体查询。