@mediaGezinme çubuğu öğelerini uygun gördüğünüz şekilde aşağı bırakmak için yeni bir sorgu oluşturabilirsiniz, yapmanız gereken tek şey, yeni sorgunuzu istenen bırakma genişliğiyle karşılamak için eski sorguyu sıfırlamaktır. Örneğin şunu al:
CSS
@media (max-width: 979px) {
.btn-navbar {
display: none;
}
.navbar .nav-collapse {
clear: none;
}
.nav-collapse {
height: auto;
overflow: auto;
}
.navbar .nav {
float: left;
margin: 0 10px 0 0;
}
.navbar .brand {
margin-left: -20px;
padding: 8px 20px 12px;
}
.navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
display: block;
}
.navbar .nav > li > a, .navbar .dropdown-menu a {
border-radius: 0;
color: #999999;
font-weight: normal;
padding: 10px 10px 11px;
}
.navbar .nav > li {
float: left;
}
.navbar .dropdown-menu {
background-clip: padding-box;
background-color: #FFFFFF;
border-color: rgba(0, 0, 0, 0.2);
border-radius: 0 0 5px 5px;
border-style: solid;
border-width: 1px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
display: none;
float: left;
left: 0;
list-style: none outside none;
margin: 0;
min-width: 160px;
padding: 4px 0;
position: absolute;
top: 100%;
z-index: 1000;
}
.navbar-form, .navbar-search {
border:none;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
float: left;
margin-bottom: 0;
margin-top:6px;
padding: 9px 15px;
}
.navbar .nav.pull-right {
float: right;
margin-left: auto;
}
}
@media (max-width: 550px) {
.btn-navbar {
display: block;
}
.navbar .nav-collapse {
clear: left;
}
.nav-collapse {
height: 0;
overflow: hidden;
}
.navbar .nav {
float: none;
margin: 0 0 9px;
}
.navbar .brand {
margin: 0 0 0 -5px;
padding-left: 10px;
padding-right: 10px;
}
.navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
display: none;
}
.navbar .nav > li > a, .navbar .dropdown-menu a {
border-radius: 3px 3px 3px 3px;
color: #999999;
font-weight: bold;
padding: 6px 15px;
}
.navbar .nav > li {
float: none;
}
.navbar .dropdown-menu {
background-color: transparent;
border: medium none;
border-radius: 0 0 0 0;
box-shadow: none;
display: block;
float: none;
left: auto;
margin: 0 15px;
max-width: none;
padding: 0;
position: static;
top: auto;
}
.navbar-form, .navbar-search {
border-bottom: 1px solid #222222;
border-top: 1px solid #222222;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
float: none;
margin: 9px 0;
padding: 9px 15px;
}
.navbar .nav.pull-right {
float: none;
margin-left: 0;
}
}
Aşağıdaki kodda @media, 979pxişaretin önündeki düşüşü işleyen orijinal sorguyu ve istediğiniz bırakma noktasını desteklemek için yeni sorguyu nasıl dahil ettiğimi görebilirsiniz 550px. Özgün sorguyu doğrudan önyükleme duyarlı css'den değiştirerek navbar öğeleri için bu belirli sorguya uygulanan tüm stilleri sıfırladım ve bunun yerine ihtiyacınız olan bırakma noktasını taşıyan yeni sorguya taşıdım. Bu şekilde, orijinal sorgudan yeni sorguya kadar tüm stilleri, önyüklemeye duyarlı stil sayfasında dolaşmadan değiştirebiliriz, bu şekilde varsayılan değerler, belgenizdeki diğer öğeler için geçerli olmaya devam eder.
İşte 550pxihtiyaç duyduğunuzda bırakılacak bir medya sorgusu içeren kısa bir demo :
http://jsfiddle.net/wU8MW/
Not: @mediaYeni değiştirilmiş css'in duyarlı css'den önce yüklenmesi gerektiği için , yukarıdaki değiştirilmiş sorguları css çerçevesinin altına yerleştirdim .