Vue/Bootstrap通知组件操作按钮位置调整问题

问题出在.toast的Flex布局方向上，当前设置为水平排列，导致内容和按钮区域横向并排。我们需要调整布局为垂直堆叠，并优化样式让按钮占满底部宽度。

修改步骤： #

1. 调整Toast容器的Flex布局 #

将.toast的Flex方向改为垂直，移除垂直居中设置，避免挤压布局：

.toast {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column; /* 改为垂直布局 */
  justify-content: flex-start;
  cursor: pointer;
  background-color: #343a40 !important;
}

2. 让内容区域自动填充空间 #

给.toast-body添加flex-grow:1，确保内容区域占据通知的剩余空间，按钮区域固定在底部：

.toast-body {
  flex-grow: 1;
  padding: 0.75rem; /* 匹配Bootstrap默认内边距 */
}

3. 优化按钮样式，占满宽度 #

用btn-group w-100包裹按钮，单个按钮会占满整个底部宽度，多个按钮则自动平分宽度：

<div class="toast-footer">
  <div class="btn-group w-100">
    <button class="btn btn-outline-primary" 
            @click="action.handler(action, $event)"
            v-for="(action, idx) in notification.actions" 
            :key="idx">
      {{ action.title }}
    </button>
  </div>
</div>

完整修改后的组件代码 #

<template>
  <ul class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1050;">
    <li v-for="(notification, index) in notifications" :key="index"
      class="toast show border-0 mb-2 auto-dissmis" @click="removeNotification(index)">
      <div class="toast-indicator" :class="'bg-' + notification.type"></div>
      <div class="toast-body" v-html="notification.message"></div>
      <div class="toast-footer">
        <div class="btn-group w-100">
          <button class="btn btn-outline-primary" 
                  @click="action.handler(action, $event)"
                  v-for="(action, idx) in notification.actions" 
                  :key="idx">
            {{ action.title }}
          </button>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  name: "Notification",
  data() {
    return {
      notifications: [],
    };
  },
  methods: {
    addNotification(message, opts) {
      opts = Object.assign({
        message,
        type: "primary",
        actions: [{
          title: "Foo",
          handler: (self, event) => {
            if (event) {
              event.stopPropagation();
              event.preventDefault();
            }
            alert("Clicked", self, event);
          }
        }]
      }, opts);
      this.notifications.push(opts);
      setTimeout(() => {
        if (this.notifications.length > 0) {
          // this.notifications.shift();
        }
      }, 2400);
    },
    removeNotification(index) {
      this.notifications.splice(index, 1);
    },
  },
  mounted() {
    this.addNotification(`Sample notification #1`);
  },
};
</script>

<style scoped>
.btn-group button:nth-child(1) {
  border-top-left-radius: 0;
}

.btn-group button:last-child {
  border-top-right-radius: 0;
}

.toast-container {
  width: 380px;
  list-style: none;
}

.toast {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  cursor: pointer;
  background-color: #343a40 !important;
}

.toast-body {
  flex-grow: 1;
  padding: 0.75rem;
}

.toast-footer {
  padding: 0.5rem;
  border-top: 1px solid #dee2e6;
}

.toast-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 6px;
  height: 100%;
}

li.auto-dissmis>.toast-indicator {
  animation: progress 2.4s linear forwards;
}

@keyframes progress {
  0% {
    height: 100%;
  }
  100% {
    height: 0;
  }
}
</style>

关键修改说明： #

• 将.toast改为垂直Flex布局，移除align-items:center避免内容居中挤压
• .toast-body添加flex-grow:1，确保内容区域自动填充剩余空间
• 用btn-group w-100处理按钮布局，单按钮占满宽度，多按钮自动平分
• 修正.toast-body内边距，匹配Bootstrap默认Toast样式

内容的提问来源于stack exchange，提问作者Marc