在移动视图中依次显示 Bootstrap Vue 列答案

【问题标题】：Display Bootstrap Vue columns one below the other in mobile view在移动视图中依次显示 Bootstrap Vue 列
【发布时间】：2020-01-28 19:09:36
【问题描述】：

我在列中使用 Bootstrap Vue 库，我每行显示 3 张卡片，它在桌面上看起来不错，但在移动设备上看起来太小了，所以我想在移动设备上显示这 3 张卡片一张在另一张下方。我该怎么做？

new Vue({
  el: "#app"
});

.card{
    background-color: #BAE5FF !important;
    border: none !important;
    border-radius: 0px 0px !important;
}

.work-link{
    color: #172e54;
}

<link href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-row>
    <b-col cols="4" sm="4" md="4">
      <b-card no-body style="max-width: 20rem;" img-src="https://placekitten.com/380/200" img-alt="Image" img-top>
        <template v-slot:header>
          <a href="" class="work-link text-center"><h5 class="mb-0"><strong>1</strong></h5></a>
         </template>

      </b-card>
    </b-col>
    
    <b-col cols="4" sm="4" md="4">
      <b-card no-body style="max-width: 20rem;" img-src="https://placekitten.com/380/200" img-alt="Image" img-top>
        <template v-slot:header>
          <a href="" class="work-link text-center"><h5 class="mb-0">                   <strong>2</strong></h5></a>
         </template>
       </b-card>
    </b-col>
    
    <b-col cols="4" sm="4" md="4">
      <b-card no-body style="max-width: 20rem;" img-src="https://placekitten.com/380/200" img-alt="Image" img-top>
        <template v-slot:header>
          <a href="" class="work-link text-center"><h5 class="mb-0"><strong>3</strong></h5></a>
        </template>
      </b-card>
    </b-col>
  </b-row>
</div>

【问题讨论】：

列属性 sm, md, lg, xl 表示在各个断点处，每行可能有 12 个列中您希望使用的列数。所以，如果你想在断点 sm 处设置三个等宽的列，你可以使用。特殊值 auto 可用于占用一行中剩余的可用列空间。
见bootstrap-vue.js.org/docs/components/layout
这不是我想要的，我想要的是在移动视图中将每张卡片显示在另一张下方，但在桌面的同一行中仍然显示 3 张卡片，所以使用 sm md lg 没有'不要为我做任何事，即使我使用例如 sm="12" md="4" lg="4".
sm="1" 也许更合适？
哎呀，还是不行:(

标签： vue.js bootstrap-vue

【解决方案1】：

Bootstrap 布局始终有 12 列，cols、sm、md、lg 和 xl 属性指定您希望元素以各种大小占据这些列的数量。有点令人困惑的是，最小断点 (xs) 是使用 cols 属性指定的。如果列的总大小超过 12，它将开始一个新行。

因此，如果您希望它们在移动设备上堆叠，则需要将 cols 属性设置为 12，以便每张卡在移动设备上占据整行。

【讨论】：