Отображать столбцы Bootstrap Vue один под другим в мобильном представлении
Я использую библиотеку 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, вы можете использовать <b-col sm="4">. специальное значение auto может использоваться для заполнения оставшегося свободного места столбца в строке.
Источник
видишь bootstrap-vue.js.org/docs/components/layout
Источник
это не то, что я хочу, то, что я хочу, чтобы отобразить каждую карту один под другим в мобильном представлении, но по-прежнему отображать 3 карты в том же ряду в рабочем столе, так что с помощью sm md lg ничего не сделал для меня, даже если я использую, например, sm="12" md="4" lg="4".
Источник
sm= " 1 " может быть, больше подходит?
Источник
уэлп, все еще не работает :(
Источник
можете ли вы создать живой пример в чем-то вроде jsfiddle или codepen?
Источник
jsfiddle.net/fysma7t0
Источник
Я сделал опечатку. Я имею в виду установить "12", а не "1". Об этом уже упоминал Винай Пай.
Источник
@FlowMafia я думаю, что вы неправильно поняли атрибут "cols". Он не указывает количество столбцов... это зафиксировано на 12. Cols определяет ширину столбца при размере "XS".
Источник
да, я исправил это, удалив атрибут "cols" и просто оставив sm и md
Источник
Ответы - Отображать столбцы Bootstrap Vue один под другим в мобильном представлении / Display Bootstrap Vue columns one below the other in mobile view
28.01.2020 11:01:03
Bootstrap layout всегда содержит 12 столбцов , cols, sm, md, lgи xlуказывают, сколько из этих столбцов должен занимать элемент при различных размерах. Несколько смущает, что наименьшая точка останова (xs) задается с помощью colsатрибут cols на 12, чтобы каждая карта занимала всю строку на мобильном устройстве.