UIB Popover移动和重新排列点击

Question

我已经实现了UI-Bootstrap popover，允许用户在我的应用中选择数学运算符。我的问题是，弹出窗口出现在错误的位置，单击时移动，并更改按钮的排列。我对这个问题的理解是它可能是由可变的大小调整和跨度放置（我用于按钮）引起的，但我还没有能够让它正常工作。

首次点击运算符时：

当您选择新的运营商时：

当您选择其他运营商时：

当您关闭弹出窗口然后再次打开它时：

这是我的popover和按钮的代码：

在index.jade中：

button.btn.btn-default(type = "button", uib-popover-template="operatorsPopover.templateUrl", popover-title="{{operatorsPopover.title}}", popover-trigger="'outsideClick'", popover-placement="top")
    span(class="{{splitStruct.operator}}") // this is the button you click to open the popover

script(type='text/ng-template', id='operatorsPopoverTemplate.html')
    button(type = "button", ng-repeat='operator in operatorsPopover.operators', ng-click="splitStruct.operator = operator")
        span.popover_button(class = "{{operator}}", size="24")

在我的控制器中：

$scope.operatorsPopover = {
        title: "Operator",
        templateUrl: 'operatorsPopoverTemplate.html',
        operators: ['lessThan', 'greaterThan', 'lessThanEqual', 'greaterThanEqual', 'equalTo', 'notEqualTo']
    };

在我的css文件中：

/* Unicode icons for mathematical operators */
.lessThan:before {
  content: "\3c";
}
.greaterThan:before {
  content: "\3e";
}
.lessThanEqual:before {
  content: "\2264";
}
.greaterThanEqual:before {
  content: "\2265";
}
.equalTo:before {
  content: "=";
}
.notEqualTo:before {
  content: "\2260";
}

.popover_button span {
  text-overflow:ellipsis;
  overflow:hidden;
  display: block;
}