样式自举按钮

Question

在Bootstrap上的按钮遇到一些麻烦：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdown-profile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      <a href="{% url "profile_update" %}" class="btn btn-default btn-sm btn-account"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a>
      <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdown-profile">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

我只想显示图标，当我单击它时，它将带给我下拉菜单。 我不要任何边界或任何东西。 我希望你们能理解我的意思。

这是现在的屏幕截图：

我只希望它像这样显示（不是箭头，而是在悬停时显示）：

Answer 1

使用开发人员工具（例如，在Google Chrome中）检查每个元素（每个div，ul，li）-它会为您显示每个项目的CSS集。

那里会有一些带有边界，边界半径和盒子阴影的东西。 如果您删除这些内容或设置自己的CSS以将这些值设置为0或“ initial”，那么您将获得想要的外观！

祝好运！ 啊，约翰尼斯击败了我。

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;
    }

在这里查看示例