Как создать два столбца в цикле с помощью бутстрапа?
Идея состоит в том, чтобы иметь в каждой строке (строке) два столбца, как я могу управлять этим в цикле vue?
Что-то надеюсь:
HTML:
<div class = "row">
<div v-for='(item,indice) in produtos' :key='indice'>
<q-card inline class = "q-ma-sm col-6">
<q-card-media>
<img v-bind:src = "item.url">
</q-card-media>
<q-card-actions align = "around">
<q-btn flat round icon = "fas fa-shopping-cart" @click = "cart($event,item)"/>
<q-btn flat round icon = "favorite" @click = "favorite($event,item)"/>
<q-btn flat round icon = "share" to = "whatsapp://send?text=Hello%20World!" />
</q-card-actions>
</q-card>
</div>
</div>
@puelo Я не могу создать два столбца в каждой строке.
—
30.07.2018 14:34
возможно, поместите v-for на q-card и удалите обертку div.
—
30.07.2018 14:36
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
3
808
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Можете ли вы попробовать это:
<div class = "row">
<div v-for='(item,indice) in produtos' :key='indice' class = "col-6">
<h1>{{ item }}</h1>
</div>
</div>
Другие вопросы по теме
V-для рендеринга html-таблицы с несколькими tr
Как выборочно использовать маршрутизацию VueJS на небольшом разделе статического веб-сайта
Vue не отображается в тесте Capybara
Vuejs: v-модель с несколькими флажками в v-for
Uncaught ReferenceError: Vue не определяется при использовании веб-пакета laravel-mix
Маршрутизатор проталкивает маршрут локали в nuxt с помощью nuxt-i18n
Инициализировать холст для каждого цикла шаблона Vue.JS
Как импортировать глобальный CSS в Vue с PostCSS?
Как изменить состояние в vuex через некоторое время, когда снэк-бар закрывается автоматически
Могу ли я иметь несколько SPA в одном приложении или использовать историю и хэш-маршрутизацию в одном приложении?
Похожие вопросы
Как проектировать в текстовом поле начальной загрузки и этикетке без пробела
Проблема с полем поиска: не удается правильно вставить поле поиска рядом с логотипом Search Font Awesome
Проблема с кнопкой начальной загрузки: кнопки неорганизованы, их невозможно разместить рядом
Отодвинуть контент
OSettings имеет значение null при вызове функции fnPagingInfo
Выбор начальной загрузки не обновляет выбранные параметры должным образом
Bootstrap и мой CSS столкнулись
Отображение содержимого внутри таблицы начальной загрузки
Отображение фонового изображения с макетом столбцов для разработки
Невозможно выровнять кнопки социальных сетей с помощью span / div
Что не работает с опубликованным вами кодом? Каждая карточка должна занимать пространство из 6 столбцов, при этом две карты заполнять всю строку (12 столбцов), а затем переходить в новую строку.