Twitter bootstrap Bootstrap 3-任何对“的支持”；“适应性设计”；还是条件句？

我正在建立一个网站，该设计为桌面和小型设备提供了不同的响应能力。就我而言，我有一个导航栏。对于桌面，它作为一个普通的导航栏工作，而对于小型设备，它必须是固定在顶部的导航栏

我的第一个解决方案是重复代码并使用类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可能是一个解决方案，但我希望避免刷新布局，这样用户就不会看到从折叠到桌面版本刷新。有什么想法吗？

你可以通过CSS和媒体查询来解决这个问题

只需将html与

.navbar固定顶类一起使用，并将此CSS放入样式表中即可

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

基本上你是这样说的，如果屏幕宽度低于767px，导航条应该有
位置：relative
，并且表现“正常”。在767px屏幕宽度以上，由于类
。导航栏固定顶部
声明，导航栏将位于
位置：固定

body
需要
边距：0
，因为固定导航栏在body元素上使用带有固定标题高度的边距，因此内容不会隐藏在其后面。
感谢您的回复。事实上，我在寻找的是另一种方式，但这给了我一个起点。啊，好的，那么你应该可以将
@media（最大宽度：767px）
切换到
@media（最小宽度：767px）
。