样式引导按钮

Question

Bootstrap上的按钮出现问题：

arr = [1,2,3,4,5]

[..., last] = arr

我只想显示图标，当我点击它时，它会给我下拉列表。我不想要任何边界或任何东西。我希望你们明白我在说什么。

这是现在的截图：

MDN

我只是希望它显示如下（不是箭头，只是在悬停时显示）：

Answer 1

使用开发者工具（例如在谷歌浏览器中）检查每个元素（每个div，ul，li） - 它将显示每个项目的CSS集。

那里会有一些边框，边框半径和框阴影。如果您要么删除它们或设置自己的CSS以将这些值设置为0或“初始”，那么您将获得所需的外观！

祝你好运！ 啊，约翰内斯打败了我。

Answer 2

在浏览器开发人员工具中，查看应用于按钮元素的哪些类将边框和阴影放在这些元素上，然后为包含border: none和box-shadow: none的同一个类添加其他规则

Answer 3

试试这个https://jsfiddle.net/2Lzo9vfc/346/

#dropdown-profile,
#dropdown-profile:hover,
#dropdown-profile:active,
#dropdown-profile:focus,
#dropdown-profile a,
#dropdown-profile a:hover,
#dropdown-profile a:active,
#dropdown-profile a:focus{
  background: none;
  border: none;
  box-shadow: none;
  outline: none;
}

#dropdown-profile .caret {
  opacity: 0;
  transition: all 0.3s ease-in;
}

#dropdown-profile:hover > .caret {
  opacity: 1;
}

Answer 4

使用此CSS代码我希望它能解决您的问题。

    #dropdown-profile.btn-default {
       border-color: transparent;
    }

    #dropdown-profile a.btn-default {
       border-color: transparent;
       background: transparent;
    }

    #dropdown-profile .caret {
      display: none;
    }

    #dropdown-profile.btn-default:hover {
        color: #333;
        background-color: transparent;
        border-color: transparent;
    }

    #dropdown-profile:hover .caret {
        display: inline-block;
    }

SEE EXAMPLE HERE