Sie können eine neue @mediaAbfrage einrichten, um die Navigationsleistenelemente nach Belieben abzulegen. Sie müssen lediglich die erstere zurücksetzen, um Ihre neue Abfrage mit der gewünschten Ablagebreite aufzunehmen. Nehmen Sie zum Beispiel:
CSS
/** Modified Responsive 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;
}
}
Im folgenden Code können Sie sehen, wie ich die ursprüngliche @mediaAbfrage, die den Abwurf vor der 979pxMarkierung behandelt, und die neue Abfrage aufgenommen habe, um Ihren gewünschten Ablagepunkt von zu unterstützen 550px. Ich habe die ursprüngliche Abfrage direkt aus dem auf Bootstrap reagierenden CSS geändert, um alle Stile zurückzusetzen, die auf diese bestimmte Abfrage für die Navigationsleistenelemente angewendet wurden, und sie auf die neue Abfrage portiert, die stattdessen den gewünschten Ablagepunkt enthält. Auf diese Weise können wir alle Stile von der ursprünglichen Abfrage bis zur neuen Abfrage umwandeln, ohne im auf Bootstrap reagierenden Stylesheet herumzuspielen. Auf diese Weise gelten die Standardwerte weiterhin für die anderen Elemente in Ihrem Dokument.
Hier ist eine kurze Demo mit einer Medienabfrage, die bei Bedarf abgelegt werden550px kann:
http://jsfiddle.net/wU8MW/
Hinweis: Ich habe die oben geänderten @mediaAbfragen weit unterhalb des CSS-Frames platziert, da das neue geänderte CSS zuerst als das reaktionsfähige CSS geladen werden soll.