综合编程

minimum width(of browser) to display the collpase button of nav bar

微信扫一扫,分享到朋友圈

minimum width(of browser) to display the collpase button of nav bar
0

Can we set width of browser to display the collapse button of a navigation bar in bootstrap?? I think media queries may help me with this..but i don’t know to set min width of browser window

Problem courtesy of: Maria Rose

Solution

You can use a media query for this. For example, this would make the collapse button toggle at 1280 pixels..

@media (max-width: 1280px) {
    .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;
    }
}

Example on Bootply: http://bootply.com/98488

Solution courtesy of: ZimSystem

Discussion

If you are using bootstrap-3,you can use col

<div class="col-md-8">.col-md-8</div>

for details http://getbootstrap.com/css/

Discussion courtesy of: Alimon Karim

Go to http://getbootstrap.com/customize/ the @grid-float-breakpoint is the last field in this screen shot, there you can enter the breakpoint (@screen-sm-min – 768px, @screen-mid-min – 992px) of where you want the menu to turn into the collapsed version.

Discussion courtesy of: Christina

This recipe can be found in it’s original form on Stack Over Flow .

阅读原文...

微信扫一扫,分享到朋友圈

minimum width(of browser) to display the collpase button of nav bar
0
CSS3 Recipes

15点聊电商:观远数据启动购物中心智能数据分析解决方案

上一篇

DockOne微信分享(二零七):瓜子云平台的实践经验

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

minimum width(of browser) to display the collpase button of nav bar

长按储存图像,分享给朋友