0
你可以看到它live here。如何讓這個Bootstrap導航欄在移動設備上看起來整潔？
下面是截圖移動：
這裏是無菌HTML：
<header class="header">
<hgroup class="pull-left">
<h1 class="site-title">
<a rel="home" title="Von" href="index.html">
<i class="fa fa-lemon-o"></i> Von
</a>
</h1>
</hgroup>
<div id="togglesidebar" class="btn btn-primary pull-right">
<i class="fa fa-bars"></i>
</div>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<!-- Search Bar -->
<div class="container">
<div class="row">
<div class="col-xs-6 col-xs-offset-2">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter by</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#contains">Contains</a></li>
<li><a href="#its_equal">It's equal</a></li>
<li><a href="#greather_than">Greather than ></a></li>
<li><a href="#less_than">Less than < </a></li>
<li class="divider"></li>
<li><a href="#all">Anything</a></li>
</ul>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" name="x" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
</div>
</div> <!-- /search-bar -->
</header> <!-- /header -->
在真人版，標誌是153px X 50px。
更新1：
Darshak號的建議之後，這是移動版本的樣子。更好，但仍需要調整。
你可能想發表您的CSS問更好的問題。只要看看HTML，就很難回答你的問題。你使用默認的引導程序的CSS？某種類型的主題？只是你的HTML不完全有用。 – JohnSalzarulo 2014-09-26 03:49:11
我正在使用Bootstrap和一個主題。這就是爲什麼我發佈了一個實時鏈接，所以你可以看到它的行動 - 將有太多的CSS顯示。無論如何，我相信核心問題是與Bootstrap相關的類。 HTML中沒有很多主題特定的類。 – marcamillion 2014-09-26 03:58:43
首先，你要加載所有CSS文件兩次並編譯成一個文件，然後在所有文件之後加載標準化（並在該文件中編譯）。所以基本上，你聲明瞭一個類，然後通過重新聲明它來使其無效，然後，爲了防止任何Bootstrap類的選擇與normalize.css一起使用，以防萬一。清理該文件，很可能您不需要執行其他任何操作 – Devin 2014-09-26 04:01:54