为什么Bootstrap 3中的Dropdown会给出不寻常的字符？

Question

我在Bootstrap下拉列表和可折叠面板中出现了一些奇怪的文物。这是一个例子：

如果您注意到＆＃34; t＆＃34;出现了一点＆＃34;＆gt;＆＃34;。当它们出现在下拉列表中时，它们将根据您是在扩展还是收缩下拉列表来改变方向。

当我查看代码时，那里什么都没有：

下拉代码：

 <a data-toggle="dropdown">Project Quote<span class="caret"></span></a>

可折叠的面板代码：

<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                       aria-expanded="true" aria-controls="collapseOne">
                        Customer Details
 </a>

由于我最近将css Boostrap更改为3.3.7，我将其更改回3.2，果然，奇怪的角色将形状变成了一个小箭头，尽管它并没有消失。

最后，我尝试删除课程＆＃34;插入符号＆＃34;。这没有效果。

任何想法如何摆脱这些东西，或者它是一种各种各样的错误？

Answer 1

他们既不是“奇怪的人工制品”，也不是“不寻常的人物”。它们被称为插入符号，它们通过让用户知道“按钮”是下拉列表来增加您正在创建的网站的用户体验。

从统计上讲，如果你没有在下拉列表中添加一个插入符号，那么很多用户都不会打开下拉列表，因为他们认为这是一个按钮，如果他们按下它们，他们就会离开当前页面。

要在Bootstrap 3.3.7中隐藏插入符号，请使用：

.dropdown .caret { display: none; }

如果上面的代码没有隐藏插入符号，您可能正在使用自定义主题，并且需要创建minimal, complete and verifiable example，以便我可以检查问题并为您的案例提供正确的CSS。 / p>

更好的选择是增加下拉列表的正确填充，确保插入符不与内容重叠：

.dropdown { padding-right: 3rem; }

您也可以考虑降低插入符号本身的right值，使其更接近按钮的右边距。