.arrow类样式在bootstrap优先级

Question

我的网页中有一些表单元素，当用户发出数据库无法识别的自定义错误时，我会显示弹出框，例如小用户名和类型。我尝试使用以下方法删除弹出箭头：

  

（相关HTML）

<label for = "username" class = "visible-xs">Username</label>
<input type = "text" id = "username" class = "form-control in-image hidden"
placeholder = "Username" autocomplete = "off" data-container = "#one" 
data-toggle = "popover" data-placement = "auto bottom" data-content = "Username Too Short">

  

（相关CSS）

.popover-content {
color: red;
font-size: 15px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #ff9;
}

.arrow {
display: none;
}

显示弹出框后，箭头仍然显示，我的箭头类的优先级低于bootstrap类。我已经正确地添加了样式表，即我的表单在引导表之后，然而这种情况发生了。 （希望图像清晰）。

我找到了一些关于如何定位箭头类的答案，它使用了像.popover＆gt;这样的东西。 .arrow，但为什么这种方法不起作用？