Vue Native NativeBase Header 文本宽度问题

Question

我正在尝试使用 Native Base 为我的 Vue Native 移动应用程序创建 header。但是，<nb-body> 似乎没有占用正确的宽度。

这里是 <template> 部分：

<template>
  <nb-container>
    <nb-header>
      <nb-left>
        <nb-button transparent>
          <nb-icon name="menu" :on-press="toggleDrawer" />
        </nb-button>
      </nb-left>
      <nb-body>
        <nb-title class="header-text">{{headerTitle}}</nb-title>
      </nb-body>
      <nb-right>
        <nb-button transparent>
          <nb-icon name="funnel" />
        </nb-button>
      </nb-right>
    </nb-header>
    <slot />
  </nb-container>
</template>

这是我的 CSS:

<style>
  .header-text{
    font-family: Graduate-Regular;
    text-align: center;
  }
</style>

An example of what this looks like.

我的 headerTitle 被截成椭圆 (...)，即使它有更多的使用空间。当我将 width: 120% 之类的内容添加到我的 CSS 时，它就适合了。但是，如果我在这里错了，请纠正我，我认为为宽度设置任意数量不是一个好习惯。

有没有办法让nb-body占满nb-left和nb-right之间的所有space，或者有办法让它占满space 需要多少？

非常感谢。

Answer 1

使用flex。在这种情况下，它们加起来为 1。左右各占 header 的 1/5 和 1/5。占3/5的Body。

      <nb-left :style="{flex:.2}>
        <nb-button transparent>
          <nb-icon name="menu" :on-press="toggleDrawer" />
        </nb-button>
      </nb-left>
      <nb-body :style="{flex:.6}>
        <nb-title class="header-text">{{headerTitle}}</nb-title>
      </nb-body>
      <nb-right :style="{flex:.2}>
        <nb-button transparent>
          <nb-icon name="funnel" />
        </nb-button>
      </nb-right>

Vue Native NativeBase Header 文本宽度问题

Vue Native NativeBase Header Text Width Issue

html

css

width

native-base