Javascript 如何将引导vue下拉列表中的按钮设置为圆形_Javascript_Html_Css_Vue.js

Javascript 如何将引导vue下拉列表中的按钮设置为圆形

javascript html css vue.js

Javascript 如何将引导vue下拉列表中的按钮设置为圆形,javascript,html,css,vue.js,Javascript,Html,Css,Vue.js,我正在使用引导Vue b-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: 3

我正在使用引导Vue b-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>

生成我的圆形按钮

但是，使用引导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>


{{$tU（'general_actions'）}

然而，这确实给出了正确的结果，但从语义上讲，它在按钮内部创建了一个按钮

我如何解决这个问题，使它不再是按钮中的一个按钮，但它仍然提供了正确的布局

编辑：我试图创建一个代码笔，但我不知道为什么什么都没有显示。。。

如果要将类添加到

内的切换按钮，请使用

切换类

道具

通过使用实用程序类

rounded circle

，创建圆形边框半径，以及

px-2

调整填充以正确匹配，也可能有一种更简单的方法来创建圆形按钮

newvue({
el:“#应用程序”
})


项目1
项目2
项目3

即使在第4版中，也可以通过使用：

css:

边界半径：100%
引导：删除下拉开关
并使用
<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>


标题

见：