【发布时间】：2026-02-19 10:20:03
【问题描述】：
你可以看到live here。
这是手机上的截图：
这是经过消毒的 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 并不完全有帮助。
-
我正在使用 Bootstrap 和一个主题。这就是为什么我发布了一个实时链接，所以你可以看到它的实际效果 - 会有太多的 CSS 来显示。无论哪种方式，我认为核心问题是与 Bootstrap 相关的类。 HTML 中没有那么多特定于主题的类。
-
首先，您将所有 CSS 文件加载两次并编译到一个文件中，然后在所有内容之后加载 normalize（并在该文件中编译）。所以基本上，你声明一个类，然后通过重新声明它来取消它，然后，以防万一，你杀死任何 Bootstrap 类的选择来使用 normalize.css。清理那个文件，你很可能不需要做任何其他事情
-
@Fabio 你说得对，发生了很多重复的文件加载。我减少了混乱，现在只有一个 Bootstrap 实例和其他 CSS 文件加载，但我仍然有布局问题。
标签： css html twitter-bootstrap responsive-design twitter-bootstrap-3