В bootstrap - vue составьте отзывчивый список предметов - PullRequest
Новая
       14

В bootstrap - vue составьте отзывчивый список предметов

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

С bootstrap - vue я делаю список предметов, и мне нужно сделать элементы в 2 столбца на больших устройствах. Похоже, 

<b-container  fluid="sm" v-for="nextAd in ads" :key="nextAd.id">
        <div style="border: 2px dotted green">
        {{ nextAd.id }}=>{{ nextAd.title }}
            </div>
    </b-container>

Но я потерпел неудачу, так как у меня всегда есть элементы в 1 столбце. Какой путь правильный? 

"bootstrap-vue": "^2.1.0"
"vue": "^2.6.10"

Спасибо!

1 Ответ

1 голос
/ 23 января 2020

Вам необходимо использовать систему начальной загрузки grid , если вы хотите адаптивный список элементов. 

new Vue({
 el: "#app"
});
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.2.2/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.2.2/dist/bootstrap-vue.min.js"></script>

<div id='app'>
  <b-container>
    <b-row>
      <b-col cols="12" sm="6" v-for="i in 10">
        <!-- Only adding this div with a background to highlight the columns -->
        <div class="bg-dark text-white">
          Item {{ i }}
        </div>
      </b-col>
    </b-row>
  </b-container>
</div>
...