0

サイズ変更時にモバイルとデスクトップの両方のレイアウトでコンテナが正しく並べ替えられるように、ページ内のコンテナの順序を設定する方法を見つけようとしています。

これが私のコードです。タブレット [col-sm] および電話 [col-xs] ビューでの順序は正しいです。

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

        <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">

        <style>

        div {border:1px solid #000;}

        div.logo {background:transparent url(../images/logo.png) no-repeat left top; height:100px;}

        div.rider {height:50px;background-color:#06C;}

        div.search {height:50px;background-color:#F39;}

        div.headers {height:100px;background-color:#933;}

        div.navigation1 {height:300px;background-color:#69F;}

        div.content {height:600px;background-color:#0FC;}

        div.social {height:50px;background-color:#C99;}

        div.navigation2 {height:300px;background-color:#3FF;}

        div.footer {height:150px;background-color:#000;}        

        </style>

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->

    </head>

    <body>

        <div class="container">

            <div class="col-md-12 logo"></div>          

            <div class="col-md-3 col-xs-12">

                <div class="rider">rider</div>

                <div class="search">search</div>

                <div class="navigation1">1st Nav</div>

            </div>

            <div class="col-md-9 col-xs-12">

                <div class="headers">headers</div>

                <div class="content">content</div>

            </div>

            <div class="col-md-3 col-xs-12">

                <div class="social">social</div>

                <div class="navigation2">2nd Nav</div>  

                <div class="footer">footer</div>

            </div>

        </div>

         <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
            <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

    </body>

</html>

問題はデスクトップ レイアウトの場合です。最初の Nav div の下に大きなギャップがあり、ソーシャル div は、コンテンツ div の高さに関係なく、デスクトップおよびより大きなビューの最初の Nav のすぐ下にある必要があります。

これを修正するにはどうすればよいですか? プル、プッシュ、オフセット、およびフロート メソッドを使用してみましたが、正しい結果が得られませんでした。

4

1 に答える 1

0

あなたが話しているギャップは、実際には左の実線の列のギャップではありません。1行目の左列と2行目の左列のコンテンツの隙間です。

最後のラッピング div (social/nav2/footer) は 2 行目にあるため、2 番目のラッピング div (ヘッダー/コンテンツ) の高さが以下の場合にのみ、下から最初のラッピング div (ライダー/検索/nav1) に触れることができます。最初の（これは間違いなくここではオプションではありません）。

この問題を解決するには、最後のラッピング div の内容を最初の div に入れることをお勧めします。ただし、モバイルおよびタブレット レイアウトでは順序が崩れます。

2 番目のオプションとして、最後のラッピング div のコンテンツを最初の div に複製することを提案できますが、上位インスタンスで .visible-md および .visible-lg クラスを使用してデスクトップ画面サイズでのみ表示し、以下のものをモバイル画面 (.hidden-md .hidden-lg クラスを使用)。これは、パフォーマンスの観点 (余分なトラフィック、余分なサーバー側の処理) からは最善のアイデアではありませんが、うまくいく可能性があります。

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
        <style>
        div {border:1px solid #000;}
        div.logo {background:transparent url(../images/logo.png) no-repeat left top; height:100px;}
        div.rider {height:50px;background-color:#06C;}
        div.search {height:50px;background-color:#F39;}
        div.headers {height:100px;background-color:#933;}
        div.navigation1 {height:300px;background-color:#69F;}
        div.content {height:600px;background-color:#0FC;}
        div.social {height:50px;background-color:#C99;}
        div.navigation2 {height:300px;background-color:#3FF;}
        div.footer {height:150px;background-color:#000;}        
        </style>
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="container">
            <div class="col-md-12 logo"></div>          
            <div class="col-md-3 col-xs-12">
                <div class="rider">rider</div>
                <div class="search">search</div>
                <div class="navigation1">1st Nav</div>
                <div class="visible-md visible-lg">
                  <div class="social">social</div>
                  <div class="navigation2">2nd Nav</div>  
                  <div class="footer">footer</div>
                </div>
            </div>
            <div class="col-md-9 col-xs-12">
                <div class="headers">headers</div>
                <div class="content">content</div>
            </div>
            <div class="col-md-3 col-xs-12 hidden-md hidden-lg">
                <div class="social">social</div>
                <div class="navigation2">2nd Nav</div>  
                <div class="footer">footer</div>
            </div>
        </div>
         <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
            <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
    </body>
</html>
于 2013-11-09T22:53:55.147 に答える