Vuetify - 如何在 v-app-bar 中為文本添加邊距？

Question

我正在使用 Vue3/Vuetify3，我試圖將 v-app-bar 的文本向右推約 300px。 當我只是向 div 元素添加填充時，它什么也沒做。 Afaik vuetify 與 flexbox 一起工作，我正在努力了解如何使用它。

任何解釋和/或建議將不勝感激！ 提前致謝！

  <v-app>
    <v-app-bar>
      <v-container class="d-flex align-center py-0">
        <v-app-bar-title class="pl-0">
          <div class="d-flex align-center">
            <v-avatar
              rounded="0"
              class="mr-3"
              image="https://cdn.vuetifyjs.com/docs/images/logos/v.png"
            />

            Example Sentence that should be centered
          </div>
        </v-app-bar-title>
      </v-container>
    </v-app-bar>

Answer 1

根據我提出的評論，它也是響應式的。 這應該只是移動文本：

<style>
  @media (min-width: 600px) {
    .app-bar-text {
      margin-left: 300px;
    }
  }
</style>

<v-app-bar>
  <v-container class="d-flex align-center py-0">
    <v-app-bar-title class="pl-0">
      <div class="app-bar-text">
        Example Sentence that should be centered
      </div>
    </v-app-bar-title>
  </v-container>
</v-app-bar>