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