html - Bootstrap 响应不起作用。

Question

我在我的元素中使用 Bootstrap ，但是当我调整窗口大小时我的模板完全混合。我的导航栏会爆炸并且我的页面的某些部分没有显示并且...... 每件事都是错的... 当我使用手机查看我的网站时，不仅没有加载 Bootstrap ，而且那里的所有内容都是错误的。 我只使用 bootstrap 站点中的代码，但在他们的站点中运行良好，而在我的元素中却不行。 例如，我从网站上复制了这个导航栏，它在调整大小方面存在问题:

<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>

我应该怎么做才能解决这个问题？

编辑: 调整窗口大小的问题已解决，但移动设备的问题仍然存在... 我的 _Layout 标题代码是这样的:

<

head>
    <meta charset="utf-8" />
    <style type="text/css">
        @@media (max-width: 767px) {
            .search-query {
                display: none;
            }
        }
        @@-ms-viewport {
            width: device-width;
}

    </style>
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <link rel="stylesheet" type="text/css" href="~/Content/bootstrap.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="~/Content/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/mosaic.css" />
    <script src="~/Scripts/jquery-1.7.1.js"></script>
    <script src="~/Scripts/mosaic.1.0.1.min.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/Site.js"></script>
    <script type="text/javascript">
        jQuery(function ($) {
            $('.bar').mosaic({
                animation: 'slide'
            });
        });
    </script>
</head>

我有 <style> 之间的代码我的标签 bootstrap-responsive.css也是。

Answer 1

尝试在您的 html 文件的头部部分添加这一行:

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

如果这不起作用，您可以使用媒体查询，如下所示:

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

关于媒体查询的更多信息在这里:http://twitter.github.io/bootstrap/scaffolding.html#responsive