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 应该紧挨在桌面和更大视图的第一个 Nav 下方，无论内容 div 的高度如何。

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

4

1 回答 1

0

您所说的间隙实际上不是实心左栏中的间隙。它是第一行左列内容与第二行左列内容之间的间隙。

您的最后一个包装 div (social/nav2/footer) 位于第二行，因此只有当第二个包装 div (headers/content) 的高度小于首先（这绝对不是一个选项）。

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