0

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

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

4

1 回答 1

0

尝试在 html 文件的 head 部分添加这一行：

<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

于 2013-05-23T16:32:08.577 回答