Отображать Bootstrap Vue столбцы один под другим в мобильном представлении - PullRequest
Новая
       13

Отображать Bootstrap Vue столбцы один под другим в мобильном представлении

0 голосов
/ 28 января 2020

Я использую библиотеку 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>

1 Ответ

3 голосов
/ 28 января 2020
Макет

Bootstrap всегда имеет 12 столбцов, атрибуты cols, sm, md, lg и xl указывают, сколько из этих столбцов вы хотите, чтобы элемент занимал в различных размерах. , Несколько странно, что наименьшая точка останова (xs) указывается с помощью атрибута cols. Если общий размер столбцов превышает 12, он начнет новую строку.

Поэтому, если вы хотите, чтобы они складывались на мобильном устройстве, вам нужно установить атрибут cols в 12, чтобы каждая карта занимала полный ряд на мобильном телефоне.

...