Question

我正在建立一个网站，该设计为桌面和小型设备提供不同的响应能力。就我而言，我有一个导航栏。虽然桌面适用于普通的导航栏，但对于小型设备，它必须是navbar-fixed-top。

我的第一个解决方案来自于重复代码并使用了visible-xs和hidden-xs类，但我对重复代码并不是特别满意。是否可以使用任何条件语句来避免这种情况？还有其他方法吗？

<!-- Desktop navbar -->
<nav class="hidden-xs navbar navbar-default navbar-menu" role="navigation" >
    <div class="container-fluid">
        ....
    </div>
</nav>

<!-- Small devices -->
<nav class="visible-xs navbar-fixed-top navbar navbar-default navbar-menu" role="navigation" >
    <div class="container-fluid">
        ....
    </div>
</nav>

添加JS可能是一个解决方案，但我想避免刷新布局，因此用户不会看到从折叠到桌面版本刷新。有什么想法吗？

Answer 1

您可以通过CSS和媒体查询解决此问题。

只需将html与.navbar-fixed-top类一起使用，并将此CSS放在样式表中。

@media (max-width: 767px) {
    .navbar-fixed-top {
        position: relative;
        top: auto;
    }        
    body {
        margin: 0;
    }
    .navbar-collapse {
        max-height: none;
    }
}

基本上你是这么说的，如果屏幕宽度低于767px，导航栏应该有position: relative并且表现'正常'。屏幕宽度超过767像素，由于position: fixed类声明，导航栏将为.navbar-fixed-top。

body需要margin: 0，因为固定的导航栏会在body元素上使用固定标题高度的边距，以便内容不会隐藏在其后面。

Bootstrap 3 - 支持＆＃34;自适应设计＆＃34;还是条件？

1 个答案: