无法使用bootstrap4 vuejs水平循环

Question

我从bootstrap3移到bootstrap4时遇到一个小问题，我的代码在bootstrap3中工作，但是现在我想使用bootstrap4，所以列网格垂直循环。我不确定这个vuejs是否与我如何循环或自举特别相关。

<template>
  <div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h2 class="page-title">Notes</h2>
        </div>    
      </div>

    <div class="row">
      <div class="box box-success">
        <div class="box-body">
          <div class="col-md-4 col-sm-6">

            <div class="single-note add-note" v-bind:class="[newNote.color]">

              <div class="colors" :class="{openDivs: currentID == -1}">
                <div
                  @click="noteColor = 'blue'"
                  class="circle blue"
                  :class="{selected: newNote.color == 'blue'}"
                ></div>

                </div> 
              </div> 

            </div> 
          <!--Start The Loop-->
          <single-note :all-notes="theNotes"></single-note>
        </div>
      </div>
    </div>
  </div>

这是单个笔记的一些代码

<template>
  <section>
    <div class="col-md-4 col-sm-6" v-for="(oneNote, i) in allNotes" :key="oneNote.i">
      <div
        v-if="oneNote.text.includes(searchKey)"
        class="single-note"
        v-bind:class="[oneNote.color]"
      >
        <p
          v-else
          :class="{expand: idToExpand == i, isDone: oneNote.completed}"
          v-html="modifiedText(i)"
        ></p>

        <div class="meta">
          <span v-if="edit && editId == i" @click="updateNote(i, oneNote)">

        </div>

        </div>
        <div class="copied" :class="{openDivs: idToCopy == i}">link is copied !</div>
      </div>
    </div>
  </section>
</template>