时间戳

首页 > 解决方案 > 如何有一个引导程序“标题行”，在移动设备上的每个标题下方堆叠正确的项目

bootstrap-4 - 如何有一个引导程序“标题行”，在移动设备上的每个标题下方堆叠正确的项目

问题描述

我试图让这些项目在移动设备上堆叠时保持在正确的标题下，而不是两个标题行堆叠在彼此的顶部，然后如果有意义的话，所有项目都在它们下面？我尝试了几种行/嵌套和表格的组合而不是行，但似乎找不到正确的组合让它看起来像现在在桌面上一样，然后在移动设备上的正确标题下堆叠正确的项目。这是可能的，还是我试图做一些超出引导简单性范围的事情？

<div class="container">      
    <div class="row">
<div class="col-sm-6" style="background-color:yellow;">
  Gold Level
</div>
<div class="col-sm-6" style="background-color:yellow;">
  Silver Level
</div>
</div>
<div class="row">
<div class="col-sm-6">
  Gold benefit 1
</div>
<div class="col-sm-6">
  Silver benefit 1
</div>
</div>
<div class="row">
<div class="col-sm-6">
  Gold benefit 2
</div>
<div class="col-sm-6">
  Silver benefit 2
</div>
</div>
<div class="row">
<div class="col-sm-6">
  Gold benefit 3
</div>
<div class="col-sm-6">
  Silver benefit 3
</div>
</div>
</div>

标签： bootstrap-4

解决方案

有几种不同的方法可以做到这一点。这些最简单的方法是将所有内容col-放在一个单一的.row并使用排序类......

<div class="container">
    <div class="row">
        <div class="col-sm-6 order-first" style="background-color:yellow;">
            Gold Level
        </div>
        <div class="col-sm-6" style="background-color:yellow;">
            Silver Level
        </div>

        <div class="col-sm-6 order-first order-sm-0">
            Gold benefit 1
        </div>
        <div class="col-sm-6">
            Silver benefit 1
        </div>

        <div class="col-sm-6 order-first order-sm-0">
            Gold benefit 2
        </div>
        <div class="col-sm-6">
            Silver benefit 2
        </div>

        <div class="col-sm-6 order-first order-sm-0">
            Gold benefit 3
        </div>
        <div class="col-sm-6">
            Silver benefit 3
        </div>
    </div>
</div>

https://www.codeply.com/go/xfoOBsoVF0

推荐阅读