Question

我正在尝试弄清楚如何在页面中设置容器的顺序，以便在调整大小时它们可以在移动设备和桌面布局中正确地重新排序。

这是我的代码，这里的顺序是正确的平板电脑[col-sm]＆amp;和电话[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应该在桌面的第一个Nav下面，并且不管内容div的高度如何都会有更大的视图。

我该如何解决这个问题？我尝试使用pull，push，offset和float方法，但没有给我正确的结果。

Answer 1

你所谈论的差距实际上并不是左栏中的差距。它是第一行左列中的内容与第二行左列中的内容之间的差距。

您的上一个换行div（社交/导航2 /页脚）位于第二行，因此只有当第二个换行div（标题/内容）的高度时，它才可以从下面触摸第一个换行div（rider / search / nav1）小于第一个（这绝对不是一个选项）。

要解决这个问题，我建议将最后一个包装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>

如何在响应式Bootstrap页面中正确地订购我的容器？

1 个答案: