在移动视图中逐行显示 Bootstrap Vue 列

Question

我正在为我的专栏使用 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>

Answer 1

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

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

在移动视图中逐行显示 Bootstrap Vue 列

Display Bootstrap Vue columns one below the other in mobile view

vue.js

bootstrap-vue