Bạn có thể thiết lập một @mediatruy vấn mới để thả các phần tử thanh điều hướng xuống khi bạn thấy phù hợp, tất cả những gì bạn phải làm là đặt lại truy vấn cũ để phù hợp với truy vấn mới của bạn với chiều rộng thả mong muốn. Lấy ví dụ này:
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;
}
}
Trong đoạn mã sau, bạn có thể thấy cách tôi bao gồm @mediatruy vấn ban đầu xử lý điểm rơi trước 979pxdấu và truy vấn mới để hỗ trợ điểm rơi mong muốn của bạn 550px. Tôi đã sửa đổi truy vấn ban đầu ngay từ css đáp ứng bootstrap để đặt lại tất cả các kiểu được áp dụng cho truy vấn cụ thể đó cho các phần tử thanh điều hướng và chuyển chúng sang truy vấn mới mang điểm rơi mà bạn cần thay thế. Bằng cách này, chúng tôi có thể chuyển đổi tất cả các kiểu từ truy vấn ban đầu xuống truy vấn mới mà không làm xáo trộn trong biểu định kiểu đáp ứng bootstrap, theo cách này, các giá trị mặc định sẽ vẫn áp dụng cho các phần tử khác trong tài liệu của bạn.
Đây là bản demo ngắn với một truy vấn phương tiện được đặt để thả 550pxkhi bạn yêu cầu:
http://jsfiddle.net/wU8MW/
Lưu ý: Tôi đã đặt các @mediatruy vấn được sửa đổi ở trên xuống bên dưới khung css vì css sửa đổi mới được cho là được tải đầu tiên so với css đáp ứng.