Question

在我的vue / cli 4 / Bootstrap 4.3应用程序中，当我需要在小型设备上显示1列数据（在大型设备上显示2列）时，我使用下一种样式

/* Big Media */
.block_2columns_md { /* md */
    display: flex;
    flex-direction: row;
    padding: 4px;
    //@if ($debug_mode) {
        border: 2px dotted blue !important;
    /*}*/
    width: 100% !important;
}

@media only screen and (min-width: 768px) and (max-width: 1023px) { /* Ipad sm */
    .block_2columns_md { /* sm */
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 4px;
        //@if ($debug_mode) {
            border: 3px solid red !important;
        /*}*/
        width: 100% !important;
    }

}

对于像这样的静态文本也可以正常使用

<div class="block_2columns_md m-0">

    <div class=" p-3">
        111
    </div>

    <div class=" p-3">
        222
    </div>

</div> <!-- <div class="block_2columns_md m-0"> -->

但是当我的数据显示为圆圈时，我会尝试：

<div v-for="(nextActiveTask, index) in tasks" :key="nextActiveTask.id">

    <div v-if="index % 2 === 0" :class="( index % 2 === 0 ? 'block_2columns_md' : '') + ' '" >
        <div class=" p-3">1:1 : index::{{ index }}</div>
    </div>

</div>

但是结果无效，例如在任务中有4行，我看到索引索引为0.2的div，但是1,3丢失了。

哪种方法有效？

已修改＃2： 我使用flexbox类进行布局，所以我尝试：

<div v-for="(nextActiveTask, index) in tasks" :key="nextActiveTask.id">

    <div v-if="index % 2 === 0" :class="( index % 2 === 0 ? 'block_2columns_md' : '') + ' '" >
        <div class=" p-3">1:1 : index::{{ index }}</div>

    <template v-if="index % 2 !== 0"  >
        <div class=" p-3" style="border: 2px dotted yellow ">1:1 : index::{{ index }}</div>
    </template>

</div> <!-- <div v-for="nextActiveTask in tasks" -->

但是它给出无效的结果。正确程度如何？

Answer 1

就这样：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 ">
            111
        </div>

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 ">
            222
        </div>
    </div>
</div>

检查：https://jsfiddle.net/sugandhnikhil/srp8mhca/

小型设备上的Bootstrap / flexbox如何在1列中显示数据

1 个答案: