Question

从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。

Answer 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有太多差异。是的，所有类名都相同，但是其大小在不同的断点处有所变化。您可以复制并粘贴引导程序模板的整个结构，但必须对间距和所有内容进行更改。

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

1 个答案: