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


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

28.01.2020 10:09:36 Просмотров 114 Источник

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

vue.js bootstrap-vue
У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/59955496/display-bootstrap-vue-columns-one-below-the-other-in-mobile-view#comment106030907_59955496
Реквизиты столбцов sm, md, lg, xl указывают количество столбцов, которые вы хотели бы использовать из возможных 12 в строке, в различных точках останова. Таким образом, если вам нужны три столбца одинаковой ширины в точке останова sm, вы можете использовать <b-col sm="4">. специальное значение auto может использоваться для заполнения оставшегося свободного места столбца в строке.
https://stackoverflow.com/questions/59955496/display-bootstrap-vue-columns-one-below-the-other-in-mobile-view#comment106030923_59955496
видишь bootstrap-vue.js.org/docs/components/layout
https://stackoverflow.com/questions/59955496/display-bootstrap-vue-columns-one-below-the-other-in-mobile-view#comment106031057_59955496
это не то, что я хочу, то, что я хочу, чтобы отобразить каждую карту один под другим в мобильном представлении, но по-прежнему отображать 3 карты в том же ряду в рабочем столе, так что с помощью sm md lg ничего не сделал для меня, даже если я использую, например, sm="12" md="4" lg="4".
https://stackoverflow.com/questions/59955496/display-bootstrap-vue-columns-one-below-the-other-in-mobile-view#comment106031162_59955496
sm= " 1 " может быть, больше подходит?
https://stackoverflow.com/questions/59955496/display-bootstrap-vue-columns-one-below-the-other-in-mobile-view#comment106031193_59955496
уэлп, все еще не работает :(
https://stackoverflow.com/questions/59955496/display-bootstrap-vue-columns-one-below-the-other-in-mobile-view#comment106031250_59955496
можете ли вы создать живой пример в чем-то вроде jsfiddle или codepen?
https://stackoverflow.com/questions/59955496/display-bootstrap-vue-columns-one-below-the-other-in-mobile-view#comment106031285_59955496
jsfiddle.net/fysma7t0
https://stackoverflow.com/questions/59955496/display-bootstrap-vue-columns-one-below-the-other-in-mobile-view#comment106031552_59955496
Я сделал опечатку. Я имею в виду установить "12", а не "1". Об этом уже упоминал Винай Пай.
https://stackoverflow.com/questions/59955496/display-bootstrap-vue-columns-one-below-the-other-in-mobile-view#comment106031582_59955496
@FlowMafia я думаю, что вы неправильно поняли атрибут "cols". Он не указывает количество столбцов... это зафиксировано на 12. Cols определяет ширину столбца при размере "XS".
https://stackoverflow.com/questions/59955496/display-bootstrap-vue-columns-one-below-the-other-in-mobile-view#comment106031610_59955496
да, я исправил это, удалив атрибут "cols" и просто оставив sm и md

Ответы - Отображать столбцы Bootstrap Vue один под другим в мобильном представлении / Display Bootstrap Vue columns one below the other in mobile view

Vinay Pai

28.01.2020 11:01:03

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

Источник
Помочь в развитии проекта:

Другие вопросы

Ответы на ваши вопросы

Закрыть X