Question

我需要为桌面创建一个multirow列，而对于移动设备，网格的布局会有所不同。请看下面的图片 Desktop Layout
Mobile Layout。
移动元素B将是第一个。但是桌面A将位于右侧，跨越两行。我尝试通过使用col-md-push重新排列桌面布局来实现这一点 - ＃/ col-md-pull-＃，但是我不能在同一列/不同的行中制作B和C并使A跨越两行。我知道我可以使用嵌套网格实现桌面布局，但我不能再使用推拉重新排列元素了。

Answer 1

Bootstrap 4 - 它支持flexboxes - 会很不错但是你可以在没有嵌套的情况下做到这一点，但是你需要创建一些自定义类。这是a demo。

<div class="row">
  <div class="pull-sm-right col-sm-6">
    <p>B</p>
  </div>
  <div class="pull-sm-left col-sm-6">
    <p>A</p>
  </div>
  <div class="pull-sm-right col-sm-6">
    <p>C</p>
  </div>
</div>

您需要的自定义类是.pull-*-<location>类：

@media (min-width: 768px) {
  .pull-sm-right {
    float: right !important;
  }

  .pull-sm-left {
    float: left !important;
  }
}

您需要手动配置div的高度，但Bootstrap的基于浮点数的网格系统永远不会真正匹配列的高度。

使用没有嵌套网格的引导程序的多行网格

1 个答案: