Firefox中没有显示Bootstrap下拉插入符号

Question

我想在按钮组内的bootstrap下拉按钮的右侧显示一个插入符号。

我的代码是（另见this fiddle）：

<div class="span3 well">
    <div class="btn-group btn-block">
        <a class="btn btn-primary dropdown-toggle btn-block" data-toggle="dropdown" href="#">
        New &hellip; <i class="caret pull-right"></i>
      </a>
      <ul class="dropdown-menu">
          <li>1</li>
          <li>2</li>
      </ul>
    </div>
</div>

和

.btn-group .dropdown-toggle {
  padding-left: 10px;
  padding-right: 10px;
}

在webkit（Safari＆amp; Chrome）中，它看起来像预期的那样：

但Firefox不起作用：

我在这里犯了错误吗？哪种行为是正确的？我该怎么办才能让它在任何地方都能运作？

Answer 1

btn-group造成了问题：

.btn-block .dropdown-toggle {
  padding-left: 10px;
  padding-right: 10px;
}

<div class="span3 well">
  <div class="btn-block"> <!-- <<< Right here is where I removed btn-group -->
    <a class="btn btn-primary dropdown-toggle btn-block" data-toggle="dropdown" href="#">
      New &hellip; <i class="caret pull-right"></i>
    </a>
    <ul class="dropdown-menu">
      <li>1</li>
      <li>2</li>
    </ul>
  </div>
</div>

http://jsfiddle.net/userdude/KdUdS/12/

在Chrome中看起来与在Firefox中看起来相同。

修改

问题在于：

.btn-group {
    font-size: 0;
    position: relative;
    vertical-align: middle;
    white-space: nowrap;    // <<< This here
}

那是line 3438 of bootstrap.css。我修好了：

<div class="btn-block btn-group" style="white-space: normal;">

http://jsfiddle.net/userdude/KdUdS/14/

现在下拉元素看起来并不那么热，但我想你知道这会解决这个问题。

Answer 2

您可以使用“ fontawesome”图标，例如：

<span class="fas fa-caret-down"></span>

图标网址： https://fontawesome.com/icons/caret-down