vue.js 如何在v-app-bar中给文本添加边距？

chhkpiq4 于 2022-12-19 发布在 Vue.js

关注(0)|答案(1)|浏览(103)

我正在使用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>

vue.js

来源：https://stackoverflow.com/questions/74805698/vuetify-how-to-add-margin-to-text-within-v-app-bar

1条答案

按热度按时间

nvbavucw1#

根据我想出的评论，它也是有响应的。这应该只是移动文本：

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

赞(0）回复(0）举报 2022-12-19

我来回答

vue.js 如何在v-app-bar中给文本添加边距？

1条答案

相关问题

热门标签

最新问答