0

使用 bootstrap v4.0，我正在开发一个站点布局，当屏幕处于 XL 模式时，它会显示右侧的“侧边栏”。侧边栏中有很多很多项目。我想在中间的某个地方交换 2 个盒子。

在 Bootstrap 3 中，您可以逐渐向左或向右移动单元格。Bootstrap 4，我可以看到有一种方法可以重新排序整个列，并且有一种方法可以将单元格发送到第一个或最后一个。但我无法弄清楚如何仅将 1 个单元格移动 1 步（基本上，跳过相邻的单元格）。在我的情况下，查看从 L 调整为 XL 时 2 和 3（应该）如何改变顺序

000000000       000000 1111
1111 2222  ==>  000000 3333
333333333       000000 2222
444444444       000000 4444
555555555       000000 5555

我确实通过将order-xl-N类应用于所有侧边栏框（仅将它们应用于某些框似乎不起作用）找到了针对我给定情况的解决方案。感觉像是过火了..所以我很好奇也许我错过了什么？如果侧边栏有 20 个项目，它们是否都需要有 order-N 类才能让其中 2 个在堆栈中间交换位置？

这是我的个人情况 html 标记。

<div class="row">
    <div class="col-12 col-xl-8">box 0</div> 
    <div class="col-12 col-xl-4">
        <div class="row">
            <div class="col-12 col-lg-7 col-xl-12">box 1</div>
            <div class="col-12 col-lg-5 col-xl-12">box 2</div>
            <div class="col-12 d-block">box 3</div>
            <div class="col-12">box 4</div>
            <div class="col-12">box 5</div>
        </div>
    </div>
</div>

虽然我确实为我的情况寻求一个优雅的解决方案，但一个通用的解决方案也很好。在某些页面上，我优先考虑框 5 并将其放在 XL 侧边栏的顶部，从而避免复杂的排序逻辑，我希望我的课程只影响框 2 和 3.. 所有这些都用于我的facebook 视频下载器项目.. 社交社交视频下载..

4

1 回答 1

0

  • 是的，你必须使用 CSS3 flexboxes 来重新排列你的 div。

  • 您可以通过仅将 col-12 col-lg-7 替换为 col-lg-7 来保存代码。试试看你就知道了。

于 2018-06-08T10:14:48.570 回答