Bootstrap - 将嵌套列推/拉到不同级别的行

Posted 2023-03-06

【中文标题】Bootstrap - 将嵌套列推/拉到不同级别的行

【英文标题】：Bootstrap - push/pull nested columns to a different level row

【发布时间】：2015-09-10 11:19:48

【问题描述】：

我是 Bootstrap 的新手，正在尝试构建一个响应式网站。在尝试对不同屏幕的列进行排序时，我遇到了 Bootstrap Grid 系统的问题。

我已经设置了下面的“网格”，它工作正常（我希望是有效的）。我的问题是从平板电脑或手机查看网站时，我希望将“----2B----”列推/拉到“----1C----”列下。我试过推/拉柱子，但我似乎无法让它工作。

是我做错了整个设置还是有可能？

<div class="row center-block rounded-div white">
    <div class="col-md-6 col-md-push-6 col-lg-5 col-lg-push-7">
        <div class="row">
            <div class="col-lg-12">
                -----1A-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----1B-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----1C-----
            </div>
        </div>
    </div>

    <div class="col-md-6 col-md-pull-6 col-lg-7 col-lg-pull-5">
        <div class="row">
            <div class="col-lg-12">
                -----2A-----
            </div>
    </div>
        <div class="row">
            <div class="col-lg-12">
                -----2B-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----2C-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----2D-----
            </div>
        </div>

    </div>
</div>

我试图勾勒出我想要完成的全部任务：

【问题讨论】：

如果您可以发布一张描述所需布局（桌面和移动）的图像，将会很有帮助。你也想要移动设备上的 2 列吗？

@Skelly - 我已经编辑了我的问题并添加了一个布局，所以你可以看到我想要做什么。

【参考方案1】：

您的列顺序不允许。你可以使用 jQuery 交换...类似$('element1').before($('element2'))

例子：

$(document).ready(function() 
     $('.a2').before($('.b2'));
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row center-block rounded-div white">
    <div class="col-md-6 col-md-push-6 col-lg-5 col-lg-push-7">
        <div class="row">
            <div class="col-lg-12">
                -----1A-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----1B-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----1C-----
            </div>
        </div>
    </div>

    <div class="col-md-6 col-md-pull-6 col-lg-7 col-lg-pull-5">
        <div class="row a2">
            <div class="col-lg-12">
                -----2A-----
            </div>
    </div>
        <div class="row b2">
            <div class="col-lg-12">
                -----2B-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----2C-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----2D-----
            </div>
        </div>

    </div>
</div>

【参考方案2】：

使用您的 html 结构。很难做到。所以我的解决方案是使用可见的控件类

<div class="row">
    <div class="col-lg-12">
        -----1C-----
    </div>
    <div class="visible-xs-12">
        -----2B----- <!-this only visible on extra small devices with column 12 ->
    </div>
</div>

资源：http://getbootstrap.com/css/#responsive-utilities

【讨论】：

这很可能是@user3333933 的解决方案，但我有点担心这会对搜索引擎优化产生什么影响。通过这样做（在查看源代码时），该列是“重复的”并显示两个地方，因为我必须使用 visible.xs 和 hidden.xs 才能获得正确的视图。

如果您的 div 中包含大量关键字，这是可能的。如果这是一个小的描述，我认为没关系。我的建议是，如果这对您的网站用户体验很重要，那就去做吧。

div 包含一个 Bootstrap 折叠元素，不幸的是，经过测试，我可以得出结论，通过使用 .hidden 和 .visible 折叠元素仅适用于原始 div（隐藏在手机屏幕上）。因此，不幸的是，这将不起作用。我只是看不出我应该如何设置网格来实现这一点并解决问题。我试图设置一行，里面有 7 列，但我也无法让它正常工作。

引导折叠元素在移动设备上正常工作。不清楚为什么它不起作用。在这种情况下，它也不依赖于父母 div（我们只在设备上隐藏和显示）

【参考方案3】：

我认为这是您可以通过 Bootstrap 获得的最接近的结果。它也不适用于移动设备上的反向 a4、a3 顺序。此外，列的位置取决于相邻列的高度。

<div class="row">
    <div class="col-xs-12 col-md-6 col-md-push-6">
        <div class="row">
            <div class="col-xs-12 col-md-12"><div class="well xtall">b1</div></div>
            <div class="col-xs-12 col-md-12"><div class="well">b2</div></div>
        </div>
    </div>
    <div class="col-xs-12 col-md-6 col-md-pull-6">
        <div class="row">
            <div class="col-xs-12 col-md-12"><div class="well tall">a1</div></div>
            <div class="col-xs-12 col-md-12"><div class="well tall">a2</div></div>
        </div>
    </div>
    <div class="col-xs-12 col-md-6">
        <div class="row">
            <div class="col-xs-12 col-md-12"><div class="well tall">a4</div></div>
            <div class="col-xs-12 col-md-12"><div class="well">a3</div></div>
        </div>
    </div>
    <div class="col-xs-12 col-md-6"><div class="well tall">b3</div></div>
    <div class="col-xs-12 col-md-6"><div class="well">a5</div></div>
  </div>

http://codeply.com/go/XCTc3U4bWh

---

在 Bootstrap 4 中，可以更改全宽（12 个单位）列的顺序。

另见：Change the order of col-*-12 columns in Bootstrap 3 by using push/pull