Vuetify 的网格与引导网格兼容吗？答案

【问题标题】：Is Vuetify's grid compatible with bootstrap grid?Vuetify 的网格与引导网格兼容吗？
【发布时间】：2020-01-11 05:30:24
【问题描述】：

从 Vuetify 文档中可以看出：

Vuetify 网格深受Bootstrap grid 的启发。它是通过使用一系列容器、行和列来集成布局和对齐内容。

这是否意味着如果我在 Vuetify 项目中使用引导网格类，它会像使用 Vuetify 组件一样工作（例如 v-container、v-row 和 v-col）？换句话说，如果我将基于引导程序的项目中的网格标记复制/粘贴到 Vuetify 项目（例如，在某些 .vue 组件中复制/粘贴到 template），它会正常工作吗？

基于my simple example that I did in this codepen，这似乎确实是这样，但我想问一个问题。

所以这段代码：

<!-- grid layout via Vuetify components -->
<v-container>
  <v-row justify-content-between>
    <v-col cols="2" class="my-col">One of three columns</v-col>
    <v-col cols="5" class="my-col">One of three columns</v-col>
    <v-col cols class="my-col">One of three columns</v-col>
  </v-row>
</v-container>

<!-- grid layout via bootstrap classes  -->
<div class="container">
  <div class="row">
    <div class="col-2 my-col">One of three columns</div>
    <div class="col-5 my-col">One of three columns</div>
    <div class="col my-col">One of three columns</div>
  </div>
</div>

为两个容器生成相同的布局。

我无法对单个示例做出结论，所以我想知道这是否普遍适用？

注意：此问题适用于 Vuetify 版本 2 和 Bootstrap 版本 4。

【问题讨论】：

标签： css twitter-bootstrap vue.js bootstrap-4 vuetify.js

【解决方案1】：

这是 Vuetify 示例：

.my-col {
  background: yellowgreen;
  border: 1px red solid;
}

<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@2.0.15/dist/vuetify.min.css">

<div class="container my-container">
  <div class="row m-row justify-content-between">
    <div class="col-md-2 my-col">One of three columns</div>
    <div class="col-md-5 my-col">One of three columns</div>
    <div class="col-md-5 my-col">One of three columns</div>
  </div>
</div>

这是 Bootstrap-4 示例：

.my-col {
  background: yellowgreen;
  border: 1px gray solid;
}

<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  
<div class="container my-container">
  <div class="row m-row justify-content-between">
    <div class="col-md-2 my-col">One of three columns</div>
    <div class="col-md-5 my-col">One of three columns</div>
    <div class="col-md-5 my-col">One of three columns</div>
  </div>
</div>

我已经检查了你所要求的一切： Vuetify 和 Bootstrap-4 有很多差异，因为容器的宽度和间距。是的，所有的类名都是相同的，但它的大小在不同的断点处会发生变化。您可以复制粘贴引导模板的整个结构，但您必须对间距和所有内容进行更改。

【讨论】：