Question

我在我的项目中使用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标题代码是这样的：

＆LT;

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文件的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

Bootstrap响应不起作用。

1 个答案: