আপনি @mediaঠিকঠাক দেখতে দেখতে নভবার উপাদানগুলি নামিয়ে দেওয়ার জন্য আপনি একটি নতুন ক্যোয়ারী স্থাপন করতে পারেন, আপনাকে যা করতে হবে তা হ'ল পছন্দসই ড্রপ প্রস্থের সাথে আপনার নতুন ক্যোয়ারী সামঞ্জস্য করতে পূর্বেরটিকে পুনরায় সেট করা। উদাহরণস্বরূপ এটি নিন:
সিএসএস
@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;
}
}
নিম্নলিখিত কোডটিতে আপনি দেখতে পাচ্ছেন যে আমি কীভাবে মূল @mediaক্যোয়ারী অন্তর্ভুক্ত করেছি যা এর আগে ড্রপ পরিচালনা করে979px চিহ্নের এবং আপনার পছন্দসই ড্রপ পয়েন্টটি সমর্থন করার জন্য নতুন ক্যোয়ারী 550px। আমি নভবারের উপাদানগুলির জন্য নির্দিষ্ট ক্যোয়ারিতে প্রয়োগ করা সমস্ত শৈলীর পুনরায় সেট করতে বুটস্ট্র্যাপ-প্রতিক্রিয়াশীল CSS থেকে মূল ক্যোয়ারীটি সংশোধন করেছি এবং সেগুলির পরিবর্তে আপনার প্রয়োজনীয় ড্রপ পয়েন্ট বহনকারী নতুন ক্যোয়ারিতে তাদের পোর্ট করা হয়েছে। বুটস্ট্র্যাপ-প্রতিক্রিয়াশীল স্টাইলশিটে কোনও গোলমাল না করে আমরা মূল ক্যোয়ারী থেকে নতুন ক্যোয়ারীতে সমস্ত শৈলীর যাত্রা করতে পারি, এইভাবে আপনার নথির অন্যান্য উপাদানগুলিতে ডিফল্ট মানগুলি এখনও প্রযোজ্য হবে।
এখানে মিডিয়া ক্যোয়ারী সহ একটি ছোট ডেমো রয়েছে যা 550pxআপনার প্রয়োজন অনুযায়ী নেমে যেতে পারে:
http://jsfiddle.net/wU8MW/
দ্রষ্টব্য: আমি উপরের পরিবর্তিত @mediaপ্রশ্নগুলি সিএসএস ফ্রেমের নীচে রেখেছি কারণ নতুন পরিবর্তিত সিএসএস প্রতিক্রিয়াশীল CSS এর চেয়ে প্রথমে লোড হওয়ার কথা।