有没有办法垂直重新排序引导程序 3 列 [英] Is there a way to reorder bootstrap 3 columns vertically

问题描述

我正在为我的一个网站使用引导程序 3.我对引导网格系统很满意，但是我找不到一种方法来做我想做的事情.我想做的是以下内容:

为移动设备获取此布局

A乙CD乙

对于计算机来说，这种布局应该变成这样(假设第一列是 .col-sm-8，第二列是 .col-sm-4)

A B行政长官D

解决方案

唉，你试图做的事情用 bootstrap 是不可能的，至少不是你尝试的方式.

与 另一个答案 并且与引导程序官方文档让您相信的内容相反、.col-*-push-* 和 .col-*-pull-* 不会改变列的顺序，只是它们的水平位置，因此您不能使用这些类垂直移动一列.

幸运的是，您实际上可以做几件事情，它们各有优缺点:

使用 CSS 更改 div 的垂直位置

这仅在您知道必须移动的元素的高度时才有效，在您的情况下为 .d.如果这样做，请更改您的 css 以包含以下内容(根据您的需要调整高度):

.d {高度:50px；}@media(最小宽度:768px){.e {顶部:-50px；}}

完整示例

用jQuery改变一个div的垂直位置

如果你不知道.d的高度，你可以使用jQuery来确定它的高度并相应地改变.e的css:

if ($(window).innerWidth() >= 768) {$('.e').css('top', -$('.d').outerHeight());}

完整示例

再次:这可以在没有 jQuery 的情况下使用纯 JS 实现.

使用 jQuery 重新排序元素

这里的关键是不会手动移动元素，但我们实际上会从 DOM 中删除一个元素并将其插入到不同的位置以实际更改元素的顺序:

if ($(window).innerWidth() >= 768) {$('.e').detach().insertAfter('.c');}

完整示例

多次使用元素并根据视口大小显示它们

您可以多次包含某些元素并添加适当的引导程序类 .hidden-xs 和 .visible-xs-block

<div class="row"><div class="col-sm-8 a">A</div><div class="col-sm-4 b">B</div><div class="col-sm-8 c">C</div><div class="col-sm-4 e hidden-xs">E</div><div class="col-sm-8 d">D</div><div class="col-sm-4 e2 visible-xs-block">E</div>

完整示例

在可访问性或搜索引擎优化方面可能不是最佳解决方案，但如果您的内容是静态的并且您只对它在屏幕上的外观感兴趣，这是最简单的方法.

I am using bootstrap 3 for one of my websites. I am pretty ok with bootstrap grid system, however I cannot find a method to do what I would like to do. What I want to do is the following:

Getting this layout for mobile

A
B
C
D
E

and this layout should become like this for computers (let's says first column is .col-sm-8 and the second is .col-sm-4)

A B
C E
D

解决方案

Alas, what you are trying to do is not possible with bootstrap, at least not the way you tried it.

Contrary to what has been suggested in another answer and contrary to what even bootstraps official docs will make you believe, .col-*-push-* and .col-*-pull-* will not change the order of columns, just their horizontal position, so you can't use theses classes to move a column vertically.

Fortunately there are several things you actually can do, all of them have their pros and cons:

Change the vertical position of a div with CSS

This only works, if you know the height of the elements you have to move past, in your case .d. If you do, change your css to include the following (adjust the height to your needs):

.d {
    height:50px;
}
@media(min-width:768px) {
    .e {
        top:-50px;
    }
}

full example

Change the vertical position of a div with jQuery

If you don't know the height of .d, you can use jQuery to determine its height and change .es css accordingly:

if ($(window).innerWidth() >= 768) {
    $('.e').css('top', -$('.d').outerHeight());
}

full example

Again: This can be achieved without jQuery, using pure JS.

Reorder the elements using jQuery

The key here is that there will be no manual moving around of elements, but we'll actually remove an element from the DOM and insert it at a different position to actually change the order of the elements:

if ($(window).innerWidth() >= 768) {
    $('.e').detach().insertAfter('.c');
}

full example

Use elements multiple times and show them based on viewport size

You can include some elements several times and add the appropriate bootstrap classes .hidden-xs and .visible-xs-block

<div class="container">
    <div class="row">
        <div class="col-sm-8 a">A</div>
        <div class="col-sm-4 b">B</div>
        <div class="col-sm-8 c">C</div>
        <div class="col-sm-4 e hidden-xs">E</div>
        <div class="col-sm-8 d">D</div>
        <div class="col-sm-4 e2 visible-xs-block">E</div>
    </div>
</div>

full example

Might not be the best solution in regards of accessibility or search engine optimization, but if your content is static and you're only interested in how it looks on a screen, this is the easiest way.

这篇关于有没有办法垂直重新排序引导程序 3 列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！