如何在vue.js中强制按钮保持一行？

Question

我在一个表中有三个按钮，当该行中的其他数据太长时，它将扩展该表，但三个按钮却彼此重叠。无论如何，我都想强制我的三个按钮保持一行。

<td class="text-xs-right">
  <div>
    <v-btn class="teal" fab small dark @click.native="$emit('edit', props.item)">
      <v-icon>edit</v-icon>
    </v-btn>
    <v-btn class="cyan" fab small @click.native="$emit('remove', props.item)">
      <v-icon>delete</v-icon>
    </v-btn>
    <v-btn class="lime" fab small @click.native="$emit('email', props.item)">
      <v-icon>email</v-icon>
    </v-btn>
  </div>
</td>

正常：

问题：

Answer 1

禁用在空白处换行：

.text-xs-right {
  white-space: nowrap;
  
  /* To help visualize the fact that the container is too small */
  width: 10px;
  border: 1px solid #ddd;
}

<div class="text-xs-right">
  <div>
    <v-btn class="teal" fab small dark @click.native="$emit('edit', props.item)">
      <v-icon>edit</v-icon>
    </v-btn>
    <v-btn class="cyan" fab small @click.native="$emit('remove', props.item)">
      <v-icon>delete</v-icon>
    </v-btn>
    <v-btn class="lime" fab small @click.native="$emit('email', props.item)">
      <v-icon>email</v-icon>
    </v-btn>
  </div>
</div>

在这种情况下，我设置了显式宽度，这意味着项目溢出。

在表格中，该列应拉伸以适合内容。

Answer 2

将新类添加到表包装器

<td class="text-xs-right buttons-cell">
  <div>
    <v-btn class="teal" fab small dark @click.native="$emit('edit', props.item)">
      <v-icon>edit</v-icon>
    </v-btn>
    <v-btn class="cyan" fab small @click.native="$emit('remove', props.item)">
      <v-icon>delete</v-icon>
    </v-btn>
    <v-btn class="lime" fab small @click.native="$emit('email', props.item)">
      <v-icon>email</v-icon>
    </v-btn>
  </div>
</td>

然后为该类添加具有min-width属性的css样式。例如：

.buttons-cell {
   min-width: 150px;
}