在 bootstrap-vue 中制作响应式项目列表

Question

使用 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"

谢谢！

Answer 1

如果您想要一个响应式的项目列表，您需要使用 bootstraps 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>

在 bootstrap-vue 中制作响应式项目列表

In bootstrap-vue make responsive listing of items

responsive

bootstrap-vue