文章/答案/技术大牛

发布

社区首页 >问答首页 >引导3 Nav报头封装在768到992像素之间。

问引导3 Nav报头封装在768到992像素之间。
EN

Stack Overflow用户

提问于 2014-02-27 13:41:58

回答 1查看 2.5K关注 0票数 0

我有5个项目在我的导航标题，是某种“文字”。当屏幕大小介于768 my和992 my之间时，菜单项将显示在我品牌下面的一行。这导致一些网页的内容被隐藏，因为我的身体标签填充-顶部没有调整到导航高度。

一旦它低于768 it，那么它就会转换到默认的折叠菜单项，引导可以完成所有操作。

我有点不知道该怎么做。我是否应该修改媒体断点以适应我的“最小菜单大小”，所以当它低于该值时，它只是转换到可折叠的版本，而不是包装行/文本？或者我应该操纵容器的大小等等？

有什么想法/建议吗？

以下是网站：http://wrestlestat.apphb.com

注意:作为临时修复，我只是使我的身体“填充-顶部”更大，以容纳包装，直到我可以得到适当的修复。

html

css

twitter-bootstrap

twitter-bootstrap-3

media-queries

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-02-27 13:51:53

您可以使用媒体查询覆盖CSS，将导航条折叠到990像素，如下所示。

http://www.bootply.com/117227

@media (max-width: 990px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22070335

复制

相似问题

问引导3 Nav报头封装在768到992像素之间。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导3 Nav报头封装在768到992像素之间。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导3 Nav报头封装在768到992像素之间。
EN