[英]Bootstrap 3 changing div order on small screens only
是的,这可以在没有 JS 的情况下使用 BS3 嵌套和推/拉来完成,并且所有的浮点数都清除了:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4 col-sm-push-4 boxlogo">
LOGO
</div>
<div class="col-xs-6 col-sm-8">
<div class="row">
<div class="col-sm-6 col-sm-pull-6 boxb">
B
</div>
<div class="col-sm-6 boxa">
A
</div>
</div>
<!--nested .row-->
</div>
</div>
</div>
使用引导程序 3:
<div class="row row-fluid">
<div class="col-md-6 col-md-push-6">
<img src="some-image.png">
</div>
<div class="col-md-6 col-md-pull-6">
<h1>Headline</h1>
<p>Lorem ipsum text of doom</p>
</div>
</div>
这是有效的,因为当有足够的空间时,它们首先会漂浮到原来的位置。 但是,当大小为中等并且空间丢失时,它们会堆叠,因为它们不能相互漂浮。 请注意,虽然我对两者都使用了 6 列,但即使它们不是 6 列,这也有效。
这是链接: http : //ageekandhisblog.com/bootstrap-3-change-stacking-order/
通常,您希望对堆叠的元素进行分组,但在您的情况下, B
和A
无法分组,因为在一种情况下需要在它们之间插入Logo
。 你有两个选择
不使用 JS,我认为这将是您最好的选择。 在这里摆弄
<div class="container">
<div class="logo col-sm-4 col-xs-6 col-sm-push-4">Logo<br/>Logo</div>
<div class="contentB col-sm-4 col-xs-6 col-sm-pull-4">B</div>
<div class="contentA col-sm-4 col-xs-6 col-xs-offset-6 col-sm-offset-0">A</div>
</div>
这个想法是在 xs 的情况下使用行的翻转属性将A
向下推。 我还使用推/拉类来重新排列 sm 案例中的 div。 然而,这里的问题是如果Logo
比B
高。 由于所有内容都在同一个网格上,因此A
与较大元素的底部对齐,在Logo
和B
之间为我们提供了空白。 对于纯 Bootstrap CSS,这确实没有任何解决方案。 (也许有人可以纠正我)
相反,我建议您在调整窗口大小时使用 JS 来移动 div。 在这里摆弄
<div class="container">
<div id="column1" class="row col-xs-6 col-sm-8">
<div id="B" class="col-xs-12 col-sm-6">B</div>
<div id="logo" class="col-xs-12 col-sm-6">Logo<br/>Logo</div>
</div>
<div id="column2" class="row col-xs-6 col-sm-4">
<div id="A" class="col-xs-12 col-sm-12 ">A</div>
</div>
</div>
和 JS
$(function() {
$(window).resize(function() {
var w = $(window).width();
if (w < 768 && $('#column1').children().length > 1) {
$('#B').prependTo( $('#column2') );
} else if (w > 768 && $('#column2').children().length > 1) {
$('#B').prependTo( $('#column1') );
}
});
});
编辑:有关推/拉/偏移类的信息,请参考引导网格文档。
我设法通过使用 jQuery 交换列内容来解决此问题,这是标记:
<div class="container">
<div class="row">
<div class="col-sm-4 swap-col">
columns 1
</div>
<div class="col-sm-4 swap-col">
columns 2
</div>
<div class="col-sm-4 swap-col">
columns 3
</div>
</div>
</div>
这是 jQuery 脚本:
$(document).ready(function(){
var col1_data,col2_data;
col1_data = $(".footer-col:nth-child(1)").html();
col2_data = $(".footer-col:nth-child(2)").html();
var w = $(window).width();
if (w < 768)
swap_columns();
function swap_columns()
{
var w = $(window).width();
if (w < 768)
{
$(".footer-col:nth-child(2)").html(col1_data);
$(".footer-col:nth-child(1)").html(col2_data);
}
else
{
$(".footer-col:nth-child(1)").html(col1_data);
$(".footer-col:nth-child(2)").html(col2_data);
}
}
$(window).resize(function() {
swap_columns();
});
});
我希望它有帮助。
我制作了一个小的 jQuery 脚本,您可以使用它来获得所需的结果。 基本上它只是检测移动视口,然后根据它们的 col-class 重新排序 div:
let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
if (isMobile) {
var colArray = []; // Make an array of all your columns
$('.column').each(function () { // Select all the desired columns based on a custom class selector
if ($(this).hasClass('col-md-6')) { // <--- Change your conditions here
colArray.unshift($(this)); // if condition is met, the column will be placed as the first element in the array, in my case all my col-md-6's
} else {
colArray.push($(this));
};
});
//Now you have an array of the columns, ordered by your conditions
for (var i = 0, l = colArray.length; i < l; i++) {
//Just just iterate through the array, and insert each div before the next
colArray[i].insertBefore(colArray[i+1]);
}
}
不是一个完整的答案,但您可以在这里找到有关 bootstrap3 响应类的信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.