如何删除 nativescript 按钮之间的边距？

Question

嘿，我正在尝试使用 vue 在 nativescript 中创建自己的底部导航，但我无法让按钮填满整个空间。任何想法为什么它不起作用？我在 gridlayout 组件中有按钮，我将高度/宽度属性都设置为 100%，但按钮之间仍有一些空间。

<template>
  <GridLayout rows="*" columns="*,*,*" horizontalAlignment="stretch">
    <Button
      row="0"
      col="0"
      text="Potty Logger"
      :class="{ active: active == 0, '-primary': active != 0 }"
      @tap="goTo(0)"/>
    <Button
      row="0"
      col="1"
      :class="{ active: active == 1, '-primary': active != 1 }"
      :isEnabled="active != 1"
      text="Walk Tracker"
      @tap="goTo(1)"/>
    <Button
      row="0"
      col="2"
      :class="{ active: active == 2, '-primary': active != 2 }"
      text="History"
      @tap="goTo(2)"
  /></GridLayout>
</template>

<style lang="scss" scoped>
label {
  vertical-align: center;
  text-align: center;
}

button {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
}
</style>

Answer 1

尝试设置

button {
  border-width: 1;
  border-color: your-background-color;
}