在bootstrap中出现了一些问题，我需要一行中的4列，但它在每行中给我1列

Question

我正在使用vue-cli，vue-2和bootstrap-4，试图做一个项目。我不明白我的错误在哪里。我需要在1行中有4列，但我在1行中得到了1列。我也尝试了col-sm-4第二个模板，但仍然给了我1行中的1列。

第一个模板：

<template>
     <div>
    <nav-bar></nav-bar>

    <div class="row">
      <div class="col-sm-9">
        <div class="row">
          <div class="col-sm-4">

            <card-bar :items="items"></card-bar>
            
          </div>
        </div>
      </div>

      <div class="col-sm-3">
        <card-bar2></card-bar2>
      </div>
     </div>
    </div>
   </template>

第二个模板：

   <template>
      <div>
       <div v-for="(item,i) in items" :key="i" class="card">
        <!-- <img :src="item.image" alt="o nno" class="card-img-top" /> -->
        <div class="card-body">
          <h5 class="card-title">{{item.car_make}}</h5>
          <p class="card-text">
            With supporting text below as a natural lead-in to additional
            content.
          </p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
      </div>
    
    </template>

  [1]: https://i.stack.imgur.com/JheQR.png
  [2]: https://i.stack.imgur.com/MI4vJ.png

Answer 1

如果我对问题的理解正确的话。你想让4列排成一行吗？

例如，您需要实际编写4个单独的列。

<!--Start of Row-->
<div class="row">

  <!--First Column-->
  <div class="col-sm-3">
    <card-bar :items="items"></card-bar>
  </div>

  <!--Second Column-->
  <div class="col-sm-3">
    <card-bar :items="items"></card-bar>
  </div>

  <!--Third Column-->
  <div class="col-sm-3">
    <card-bar :items="items"></card-bar>
  </div>

  <!--Fourth Column-->
  <div class="col-sm-3">
    <card-bar :items="items"></card-bar>
  </div>
</div>
<!--End of Row-->