Javascript UIB Popover在单击时移动和重新排列

我已经实现了一个UI引导弹出窗口，允许用户在我的应用程序中选择一个数学运算符。我的问题是，弹出框出现在错误的位置，单击时移动，并更改按钮的排列。我对这个问题的理解是，它可能是由可变的跨距大小和位置（我用于按钮）引起的，但我无法使它正常工作

首次单击操作员符号时：

选择新操作员时：

选择其他操作员时：

当您关闭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;
}

---

您是否尝试过使用

popover append-to-body

？效果很好。谢谢使用此方法，六个按钮全部显示在一行中。你知道我该怎么弄两排三个按钮吗？我想它包括在ng重复中使用ng if，生成在第三个$index之后执行某些操作的按钮，但我不确定具体是什么。

或

.col-sm-12

？我认为可以将其缩短为

br（ng if=“！（$index+1）%3”）

，但它仍然很难看：）