css - 为什么在 Windows 和 Macbook Pro 上访问时宽度卡不同？

Question

我的代码是这样的：

<div id="app">
  <v-app id="inspire">
    <v-content>
      <v-container>
        <v-card
          max-width="1000"
          class="mx-auto"
        >

          <v-form v-model="valid">
            <v-container>
              <v-row>
                <v-col
                  cols="12"
                  md="4"
                >
                  <v-text-field
                    label="First name"
                    required
                  ></v-text-field>
                </v-col>

                <v-col
                  cols="12"
                  md="4"
                >
                  <v-text-field
                    label="Last name"
                    required
                  ></v-text-field>
                </v-col>

                <v-col
                  cols="12"
                  md="4"
                >
                  <v-text-field
                    label="E-mail"
                    required
                  ></v-text-field>
                </v-col>
              </v-row>
            </v-container>
          </v-form>

        </v-card>
      </v-container>
    </v-content>
  </v-app>
</div>

像这样的演示：https ://codepen.io/trendingnews/pen/oNgooPg?editors=1010

如果 macbook pro 像这样访问：

但如果通过这样的窗口访问：

看起来windows的宽度更大

我怎样才能让它一样？

笔记

我尝试使用 Macbook Pro 13 英寸 2017

我在我的 macbook 中安装 windows 使用 bootcamp。所以我可以在macbook和windows中看到它

标签： cssvue.jsbootstrap-4vue-componentvuetify.js

Answer 1

从 max-width 中删除单词 max 应该可以。最大宽度是它可以达到的最大宽度。

如果它在没有达到最大值的情况下适合，那么它不会拉伸盒子。（这是你在 macbook 上看到的。）