我正在尝试弄清楚如何设置我的容器在页面中的顺序，以便它们在调整大小时在移动和桌面布局中正确地重新排序。
这是我的代码，在平板电脑 [col-sm] 和手机 [col-xs] View 中的顺序是正确的:
<!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 应该在桌面和更大的 View 中紧挨着第一个 Nav 下面，无论内容 div 的高度如何。
我该如何解决这个问题？我尝试使用 pull、push、offset 和 float 方法，但都没有给出正确的结果。
最佳答案
你说的差距其实不是实心左栏的差距。第一行左栏内容与第二行左栏内容之间的空隙。
你的最后一个包装 div (social/nav2/footer) 在第二行，所以它可以从下面接触第一个包装 div (rider/search/nav1) 只有当第二个包装 div (headers/content) 的高度小于 first(这里绝对不是一个选项)。
要解决这个问题，我建议将最后一个包装 div 的内容放入第一个。但是，它会破坏手机和平板电脑布局中的顺序。
作为第二个选项，我可以提供将最后一个包装 div 的内容复制到第一个，但通过在上层实例上使用 .visible-md 和 .visible-lg 类使其仅在桌面屏幕尺寸下可见，并显示一个下面仅在移动屏幕中(使用 .hidden-md .hidden-lg 类)。从性能的 Angular 来看，这不是最好的主意(额外的流量、额外的服务器端处理)，但它可以工作。
<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>
关于css - 如何在响应式 Bootstrap 页面中正确排序我的容器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19883207/