在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>

​