如何停止 Vuetify 应用栏内容溢出

Question

我目前正在创建一个简历网站，我遇到了一个问题，当我将屏幕调整为更小的尺寸时，标题右侧的按钮开始离开屏幕。如何使这些项目保持在右侧对齐，而不会从屏幕上掉下来？两个按钮之间的边距也在缩小，因此它们彼此重叠。

正常

小屏幕

<template>
  <v-app-bar
    app
    color="primary"
    dark
    class="align-center"
  >
    <v-col>
      <v-btn
        plain
        dark
        :ripple="false"
        to="/"
        class="name">
        David Westwood
      </v-btn>
    </v-col>
    
    <v-spacer />
    <v-row align-center class="d-none d-sm-flex pl-2">
      <v-spacer />
      <v-btn 
        plain dark 
        v-for="directory in directories" 
        :key="directory[0]"
        :to="directory[1]"
        :ripple="false"
        >
          {{directory[0]}}
      </v-btn>
      <v-spacer />
    </v-row>
    <v-spacer />
    <v-row cols='8' align-content="right" no-gutters>
      <v-spacer />
      <v-col cols='2'>
        <v-btn
          class="white--text"
          href=""
          target="_blank"
          icon
        >
          <v-icon size="24px">
            mdi-linkedin
          </v-icon>
        </v-btn>
      </v-col>
      <v-col cols='6' class='mt-1'>
        <v-btn color='success'>
          Get in touch
        </v-btn>
      </v-col>
    </v-row>
  </v-app-bar>
</template>

<script>
export default {
  data: ()=>{
    return {
      directories: [
        ["Resume", "/resume"],
        ["Portfolio", "/portfolio"],
        ["Contact", "/contact"]
      ]
    }
  }
}
</script>

<style>
.v-btn.name {
  font-size: 20px;
  font-weight: bold;
  font-family: sans-serif;
}
</style>

Answer 1

• 在 Get in touch 按钮上将 cols="6" 替换为 cols="auto"。如果将其设置为数值，则宽度将是固定的。如果不包含，则 col 将扩展以填充行。
• 删除 LinkedIn 之前的 v-spacer（v-row 内的兄弟），将 justify="end" 添加到其父 v-row 以使内容向右对齐。
• 中间的三个导航按钮需要用 v-col 包裹（每个）。将 v-for 移动到 v-col （最好是 cols="4" 这样它们就不会随着页面变窄而移动行）。 v-row 始终需要 v-col 作为直接子级。
• 还有 v-col 和 v-row 作为兄弟，第一个 v-col 没有包裹在 v-row 中。

老实说，您不需要任何这些 v 型垫片。只需删除所有这些并查看 v-row justify 属性。 （周围的空间，之间的空间等）

可视化内容框的一个技巧是在所有元素上添加样式：

* {
  outline: 1px solid lime;
}