我正在使用Bootstrap Vue b下拉菜单(https://bootstrap-vue.org/docs/components/dropdown)像这样：
我想能够将按钮(打开下拉菜单(设计成一个圆圈，里面有一个+图标。
我可以使用以下css创建圆：
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
border-radius: 35px;
font-size: 24px;
line-height: 1.33;
}
.btn-circle {
width: 30px;
height: 30px;
padding: 6px 0px;
border-radius: 15px;
text-align: center;
font-size: 12px;
line-height: 1.42857;
}
然后使用
<b-button
class="btn btn-circle btn-xl"
>
<i class="far fa-plus" />
</b-button>
生成我的圆形按钮。
然而，当使用bootstrap vue下拉菜单时，按钮样式的选项是使用模板：
<template #button-content>
<b-button
class="btn btn-circle btn-xl"
>
<i class="far fa-plus" /><span class="sr-only">{{ $tU('general_actions') }}</span>
</b-button>
</template>
然而，这确实给出了正确的结果，但从语义上讲，它在按钮中创建了一个按钮。
我该如何解决这个问题，使它不再是按钮中的按钮，但仍然提供正确的布局？
编辑：我试着创建一个代码笔，但我不知道为什么什么都没有出现。。。https://codepen.io/anjazb/pen/zYBoMQp
如果要将类添加到<b-dropdown>内的切换按钮，请使用toggle-class道具。
还有一种更简单的方法可以让您创建圆形按钮，方法是使用实用程序类rounded-circle创建圆形边界半径，并使用px-2调整填充以正确匹配。
new Vue({
el: '#app'
})<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.18.1/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.18.1/dist/bootstrap-vue-icons.js"></script>
<link href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.18.1/dist/bootstrap-vue.css" rel="stylesheet" />
<div id="app">
<b-button variant="primary" class="rounded-circle px-2">
<b-icon icon="plus" scale="2"></b-icon>
</b-button>
<b-dropdown variant="primary" toggle-class="rounded-circle px-2" no-caret>
<template #button-content>
<b-icon icon="plus" scale="2"></b-icon>
</template>
<b-dropdown-item>Item 1</b-dropdown-item>
<b-dropdown-item>Item 2</b-dropdown-item>
<b-dropdown-item>Item 3</b-dropdown-item>
</b-dropdown>
</div>即使这样也可以在版本4中使用：
css：border-radius:100%;
引导程序：removing dropdown-toggle和使用
<i class="fa fa-plus" aria-hidden="false"></i></button>
整个代码就像：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-11/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Title</title>
<style>
</style>
</head>
<body>
<div>
<button class="btn btn-primary " style="border-radius:100%;" id="dropdownMenuButton" data-toggle="dropdown">
<i class="fa fa-plus" aria-hidden="false"></i></button>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
请参阅：https://jsfiddle.net/9ubdkm2r/1/