簡單做的話，直接飲用BOOTSTARP菜單，別在BOOTSTARP.CSS的文件里面修改，引用一個自己建的CSS文件，找到相應的div在自己建的CSS文件里面改。

小白注意：CSS是從上往下加載的，所以自己建的這個CSS文件夾必須放在BOOTSTARP.CSS文件的后面引用

我現在也需要實現這種?效果 ，有好的方案嗎

<header?role="banner">
????<nav?role="navigation"?class="navbar?navbar-static-top?navbar-default">
????????<div?class="container?">
????????????<div?class="navbar-header">
????????????????<!--設置手風琴式的navbar，然后類navbar-toggle包裝在屏幕大于992px，隱藏-->
????????????????<button?type="button"?class="navbar-toggle"?data-toggle="collapse"?data-target="#navbar-collapse">
????????????????????<!--這里的span.icon-bar?是用來在按鈕中畫三條線-->
????????????????????<span?class="icon-bar"></span>
????????????????????<span?class="icon-bar"></span>
????????????????????<span?class="icon-bar"></span>
????????????????</button>
????????????????<a?class="navbar-brand"?href="index.html"><img?src="img/logo.png"?alt="Bootstrappin'"?width="120"></a>
????????????????<!--這里的商標圖一定要設置寬度-->
????????????</div>
????????????<!--這里的類collapse保證默認包裹的菜單是隱藏的，如果?替換為?in?則顯示-->
????????????<div?class="navbar-collapse?collapse"?id="navbar-collapse">
????????????????<ul?class="nav?navbar-nav">
????????????????????<li?class="active"><a?href="index.html">
????????????????????????<span?class="icon?fa?fa-home?"></span>?Home</a></li>
????????????????????<li><a?href="#">
???????????????????????<span?class="icon?fa?fa-desktop"></span>?Portfolio</a></li>
????????????????????<li><a?href="#">
????????????????????????<span?class="icon?fa?fa-group?"></span>?Team</a></li>
????????????????????<li><a?href="#">
????????????????????????<span?class="icon?fa?fa-envelope?"></span>?Contact</a></li>
????????????????</ul>
????????????</div><!--/.nav-collapse?-->
????????</div><!--/.container?-->
????</nav>
</header>

這是我跟著做的一個實例，看上面第一個注釋，button定義了類navbar-toggle。navbar-toggle其中的一個樣式是媒體查詢。

//bootstrap.css
@media?(min-width:?992px)?{
??.navbar-toggle?{
????display:?none;
??}
}

然后我又查看了下navbar.less文件。發現

//navbar.less

.navbar-toggle?{
??position:?relative;
??float:?right;
??margin-right:?@navbar-padding-horizontal;
??padding:?9px?10px;
??.navbar-vertical-align(34px);
??background-color:?transparent;
??border:?1px?solid?transparent;
??border-radius:?@border-radius-base;

??//?Bars
??.icon-bar?{
????display:?block;
????width:?22px;
????height:?2px;
????border-radius:?1px;
??}
??.icon-bar?+?.icon-bar?{
????margin-top:?4px;
??}

??@media?(min-width:?@grid-float-breakpoint)?{?//@grid-float-breakpoint
????display:?none;
??}
}

//variables.less
@grid-float-breakpoint:?????@screen-sm-min;
//--------
@screen-sm:??????????????????768px;
@screen-sm-min:??????????????@screen-sm;

@screen-md:??????????????????992px;
@screen-md-min:??????????????@screen-md;
@screen-desktop:?????????????@screen-md-min;

//?Large?screen?/?wide?desktop
//?Note:?Deprecated?@screen-lg?and?@screen-lg-desktop?as?of?v3.0.1
@screen-lg:??????????????????1200px;
@screen-lg-min:??????????????@screen-lg;
@screen-lg-desktop:??????????@screen-lg-min;

所以，如果你想修改默認的折疊斷點，就將上面的媒體查詢變量?@grid-float-breakpoint: ? ? @screen-sm-min;

修改為其他Bootstrap定義的斷點，當然也可以自定義一個斷點變量。然后重新編譯為css文件即可。

注：最好把 variables.less 復制一份為 _variables.lss。navbar.less 復制一份 _navbar.less。然后在復制的文件上修改。最后將 bootstrap.less 復制一份 __bootstrap 將其中的導入

//__bootstrap.less
//@import?"navbar.less";?
@import?"_navbar.less";
//@import?"variables.less";
@import?"_variables.less";

修改完，編譯自定義的 __bootstrap.less 即可。

有一個最不好的辦法，就是你去改bootstrap里面帶的媒體查詢css樣式，這樣也能達到目的

這個不能吧？小于768px和小于960px是bootstrap設置的一個臨界值，或許你可以查找官網的靜止自適應布局方面的方案，或許對你有幫助。