时间戳

首页 > 解决方案 > 使用 v-for 和 bootstrap 时卡片未形成网格

html - 使用 v-for 和 bootstrap 时卡片未形成网格

问题描述

我是 vuejs 的新手，并尝试通过使用引导类循环对象来创建网格，但是当使用col类时，卡片只放在一个列中，而不是形成一个网格。

这是组件的代码：

<template>
  <div class="row">
    <div class="col-md-6 col-lg-4">
      <div class="card">
        <div class="card-header card-head-color">
          NAME <small>(Price: PRICE)</small>
        </div>
        <div class="card-body">
          <div class="float-left">
            <input type="number" class="form-control" placeholder="Quantity" />
          </div>
          <button class="btn btn-success float-right">Buy</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Stock",
};
</script>

<style scoped>
.card-head-color {
  background-color: #54db47;
  opacity: 0.7;
}
</style>

所有卡片都在一个列中，而不是形成一个网格

所有卡片都在一个列中，而不是形成一个网格。

这是调用它的父组件：-

<template>
  <div>
    <app-stock v-for="stock in stocks" :key="stock.id"> </app-stock>
  </div>
</template>

<script>
import Stock from "@/components/stock/Stock";
export default {
  name: "Stocks",
  data() {
    return {
      stocks: [
        {
          id: 1,
          name: "BMW",
          price: 100,
        },
        {
          id: 2,
          name: "Google",
          price: 200,
        },
        {
          id: 3,
          name: "Apple",
          price: 250,
        },
        {
          id: 4,
          name: "Twitter",
          price: 10,
        },
      ],
    };
  },
  components: {
    appStock: Stock,
  },
};
</script>

<style scoped></style>

我想让卡片形成一个网格。帮助将不胜感激。

标签： htmlcsstwitter-bootstrapvue.jsbootstrap-4

解决方案

您循环遍历row并且在行元素中您只有一张卡。所以每一个col都有整个宽度......

如果您想将一些卡片彼此相邻放置，您应该将元素更改为<row>元素的包装器v-for。一个例子：

在您的父亲组件中：

<template>
  <div id="app">
      <b-container>
          <b-row>
              <app-stock v-for="stock in stocks" :key="stock.id"></app-stock>
          </b-row>
      </b-container>
  </div>
</template>

在孩子身上：

<template>
   <b-col class="col-md-6 col-lg-4">
       <div class="card">
           <div class="card-header card-head-color">
               NAME <small>(Price: PRICE)</small>
           </div>
           <div class="card-body">
               <div class="float-left">
                <input type="number" class="form-control" placeholder="Quantity"/>
            </div>
            <button class="btn btn-success float-right">Buy</button>
        </div>
    </div>
</b-col>

推荐阅读