Bootstrap 4：在移动设备上切换列

Question

我用Bootstrap的网格系统（编辑：我使用的是Bootstrap 4，但仍可切换）构建了一个带有侧边栏的标准布局。它看起来像这样：

<div class="row">
  <div class="col-md-3">
    ...
  </div>
  <div class="col-md-9">
    <div class="row">
      <div class="col-md-4">...</div>
      <div class="col-md-4">...</div>
      <div class="col-md-4">...</div>
    </div>
  </div>
</div>

在移动设备上，红色区域将位于绿色区域之上。我需要能够以比滚动更方便的方式在它们之间切换，例如使用开关按钮：

还要注意绿色区域中元素的不同顺序。

有没有聪明的方法来解决这个问题？或者我必须使用JavaScript修改DOM？提前感谢：）

- Erik Hofer

---

在移动设备上，您可以通过推送切换/离屏来带入侧边栏。http://getbootstrap.com/examples/offcanvas/ - Sahil Dhir

当它们被切换时，您是否仍希望两者都可见？ 还是一个隐藏，另一个显示？ - Carol Skelly

@ZimSystem 只应该显示一个“全屏”窗口。 - Erik Hofer

Answer 1

您可以使用jQuery切换BS4 flexbox实用类之一。例如，在第一个（ col-md-3 ）列上应用 flex-last 。

要在移动设备上使用按钮切换顺序，请切换 flex-last 类...

$('#btnToggle').click(function(){
    $('.col-md-3').toggleClass('flex-last');
})

编辑：为了只显示一个（使用按钮切换两个div的可见性），可以使用toggle hidden-sm-down类...

$('#btnToggle').click(function(){
    $('.col-md-3, .col-md-9').toggleClass('hidden-sm-down');
})

演示

---

在Bootstrap 4中，列的顺序可以使用CSS进行切换，但这会根据屏幕宽度来切换列，因此不会被按钮触发。

<div class="row">
  <div class="col-md-3 flex-last flex-md-unordered">
    ...
  </div>
  <div class="col-md-9">
    <div class="row">
      <div class="col-md-4">...</div>
      <div class="col-md-4">...</div>
      <div class="col-md-4">...</div>
    </div>
  </div>
</div>

更新

自Bootstrap 4 Beta 3起，排序类的名称已更改为order-*，例如order-1，order-md-2等。

- Carol Skelly

---

好的，这种方法非常简单...它并不完全响应式，只有按钮被隐藏了。所以我仍然需要使用JS来使其工作，https://github.com/maciej-gurban/responsive-bootstrap-toolkit 看起来很有前途。 - Erik Hofer

我不明白你的意思，“它不是完全响应式的，只有按钮被隐藏了”。是的，你需要使用JS来切换div。 - Carol Skelly

响应式的意思是当窗口大小改变时，它能正确地表现出来。在你的演示中，我可以把窗口缩小，隐藏其中一列，再把窗口放大，但这一列仍然被隐藏了。这破坏了布局...我想这只有通过监听窗口调整事件才能实现。 - Erik Hofer

试试我的最新更新。它们在较大的屏幕上都可见。 - Carol Skelly

为什么在不需要JavaScript的情况下还要使用它？ - Matej

因为 OP 想要通过“按钮”在移动设备上切换可见性，而不是顺序。 - Carol Skelly

Answer 2

Bootstrap 4使用Flexbox，这意味着您可以利用显示内容的顺序。

通常情况下，您可以使用类似于order-last和order-sm-unordered的类来指定在不同视口上如何显示。

flexbox/order文档

- Matej