Bootstrap-Vue diffrent col size 基于 v-for 中的布尔值

Question

嗨，我从我的 api 中获取了 5 列，如果我想让它成为 col-12，我是 api 的布尔值 = true，我是 vue.js 的新手，我不太明白out，但是bootstrap我合作了很长时间

我的布局需要

col-6 col-6
col-12
col-6 col-6

但我得到的是
col-6
col-6
col-12
col-6
col-6

谁能指导我正确的方法

<b-container class="h-100" v-for="block in item.block" :key="block.id">
        <b-row class="h-100 justify-content-center align-items-center text-center">
            <b-col v-if="block.fullWidth" class="col-12">
                <section class="sf-banner hero" v-bind:style="{ backgroundImage: 'url(' + block.backgroundImage.url + ')' }">
                  <h1 class="sf-banner__title">{{block.title}}</h1>
                </section>
            </b-col>
        </b-row>
        <b-row class="h-100 justify-content-center align-items-center text-center">
            <b-col class="col-6" v-if="!block.fullWidth">
                <section class="sf-banner block" v-bind:style="{ backgroundImage: 'url(' + block.backgroundImage.url + ')' }">
                  <h1 class="sf-banner__title">{{block.title}}</h1>
                </section>
            </b-col>
        </b-row>
    </b-container>

Answer 1

v-for 应该在列而不是容器上，然后使用

:class="{'col-12': block.fullWidth, 'col-6': !block.fullWidth}"

或

:class="[block.fullWidth ? 'col-12' : 'col-6']"

RTM：https://vuejs.org/v2/guide/class-and-style.html

<b-container class="h-100">
  <b-row class="h-100 justify-content-center align-items-center text-center">
    <b-col v-for="block in item.block" :key="block.id" :class="{'col-12': block.fullWidth, 'col-6': !block.fullWidth}">
      <section class="sf-banner hero" :style="{ backgroundImage: 'url(' + block.backgroundImage.url + ')' }">
        <h1 class="sf-banner__title">{{block.title}}</h1>
      </section>
    </b-col>
  </b-row>
</b-container>

Bootstrap-Vue diffrent col size 基于 v-for 中的布尔值

Bootstrap-Vue diffrent col size based on boolean in v-for

javascript

vue.js

bootstrap-4

bootstrap-vue