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 に答える