Html 引导响应不起作用。

我在我的项目中使用引导，但当我完全调整窗口大小时，我的模板混合。我的导航栏会爆炸，我的页面的某些部分不会显示，并且。。。 一切都错了。。。 当我使用手机查看我的网站时，不仅引导程序没有加载，而且那里的每件事都是错误的。 我只使用引导站点中的代码，但在他们的站点中工作良好，而在我的项目中则不然。 例如，我从站点复制了此导航栏，但它在调整大小方面存在问题：

<div class="navbar navbar-inverse" style="position: static;">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-target=".navbar-inverse-collapse" data-toggle="collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">Title</a>
            <div class="nav-collapse collapse navbar-inverse-collapse">
                <ul class="nav">
                    <li class="active">
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">Link</a>
                    </li>
                    <li>
                        <a href="#">Link</a>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-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 class="nav-header">Nav header</li>
                            <li>
                                <a href="#">Separated link</a>
                            </li>
                            <li>
                                <a href="#">One more separated link</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-search pull-left" action="">
                    <input class="search-query span2" type="text" placeholder="Search">
                </form>
                <ul class="nav pull-right">
                    <li>
                        <a href="#">Link</a>
                    </li>
                    <li class="divider-vertical"></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-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>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

导航标头

我该怎么解决这个问题

编辑： 这个问题在调整窗口大小时得到了解决，但移动设备的问题仍然存在。。。 我的布局标题代码如下所示：

@@介质（最大宽度：767px）{ .搜索查询{ 显示：无； } } @@-ms视口{ 宽度：设备宽度； } @视图包。标题 @style.Render（“~/Content/css”） @Scripts.Render（“~/bundles/modernizer”） jQuery（函数（$）{ $（'.bar'）.mosaic({ 动画：“幻灯片” }); });

---

我的

bootstrap responsive.css中也有
标记之间的代码。
尝试在html文件的标题部分添加这一行：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

有关媒体查询的更多信息，请参见此处：
是否包含bootstrap-responsive.css文件？哦，谢谢。我已经加载了该文件，应该在bootstrap.css之后加载，但在此之前我已经加载了该文件。谢谢你提及我的朋友。；）@Lowkase它还不能在手机上工作。：（我已经编辑了这个问题。）
<meta name="viewport" content="width=device-width, initial-scale=1.0">

@media (max-width: 767px) {
   .search-query {
      display: none;
    }
 }