Question

我正在使用 Bootstrap-vue 。我需要使b-dropdown-item-button包裹正在显示的文本。我该怎么办？

<template>
  <b-dropdown menu-class="py-1" text="··· Actions">
    <b-dropdown-item-button>Delete</b-dropdown-item-button>
  </b-dropdown>
</template>

Answer 1

该下拉菜单默认设置为min-width and空格：nowrap`，因此您需要应用一些CSS来覆盖它。

window.onload = () => {
  new Vue({
    el: '#app'
  })
}

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.4/dist/bootstrap-vue.min.js"></script>

<style>
/* Adding it here since it wasn't working in the snippet CSS */
body { padding: 1rem; }

/* Removes the min-width on the dropdown-menu and sets the width to 100% of the parent */
.wrap-dropdown {
  width: 100%;
  min-width: 0;
}

/* applies white-space: normal to all tags inside the dropdown-menu */
.wrap-dropdown * {
  white-space: normal;
}
</style>

<div id="app">
  <b-dd menu-class="py-1 wrap-dropdown" text="··· Actions">
    <b-dd-item-btn>Delete</b-dd-item-btn>
    <b-dd-item-btn>
      This text is really long
    </b-dd-item-btn>
  </b-dd>
</div>

b-dropdown-item-button太长，如何使其更短或换行？

1 个答案: