2014-05-02 49 views
1

是否有一种方法可以为所有版本的站点使用导航栏的折叠版本,无论大小如何?在Bootstrap3中使用折叠的导航栏作为默认值

已更改以下但不知道这是否是这样做的最有效的方法:

@media (min-width: 768px) { 
    .navbar > .container .navbar-brand { 
    margin-left: -15px; 
    } 
    } 
    .navbar-toggle { 
     position: relative; 
     float: right; 
     margin-right: 15px; 
     padding: 9px 10px; 
     margin-top: 8px; 
     margin-bottom: 8px; 
     background-color: transparent; 
     background-image: none; 
     border: 1px solid transparent; 
     border-radius: 4px; 
    } 
    .navbar-toggle .icon-bar { 
     display: block; 
     width: 22px; 
     height: 2px; 
     border-radius: 1px; 
    } 
    .navbar-toggle .icon-bar + .icon-bar { 
    margin-top: 4px; 
    } 

回答

1

是,只需将@grid-float-breakpoint减变量(住在bootstrap/less/variables.less)到荒谬的高值(例如999999999px),然后重新编译Bootstrap。

+0

应选择正确的答案。 –

0

CSS的覆盖可以简化为这样:

.navbar-header { 
    float: none; 
} 
.navbar-toggle { 
    display: block; 
} 
.navbar-collapse.collapse { 
    display: none!important; 
} 
.navbar-nav { 
    float: none!important; 
} 
.navbar-nav>li { 
    float: none; 
} 
.collapse.in{ 
    display:block !important; 
} 

http://www.bootply.com/nANH5ownG9