Bootstrap 移除圆角时弹出框箭头更正

Question

我设置了一个 Bootstrap 3 弹出窗口设计 here。

我已经用这段代码删除了边框半径：

.popover {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    max-height: 50%;
    overflow-y: auto;
}

这导致箭头从视图中消失。我想保留箭头。尝试了此处提供的许多解决方案，但无法正确解决。我该如何更正我的代码？

Answer 1

这是导致问题的溢出。如果您想设置自定义高度，请在 .popover-content

上执行此操作

看这里：http://www.bootply.com/esSpOuWbLb

Answer 2

问题不是因为去除了圆角。

由于 overflow-y:auto; 你遇到了这个问题

.popover {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    max-height: 50%;
    overflow-y: auto;
}

解决方案：

.popover {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    max-height: 50%;
}
.popover-content{
  height: 80px;
  overflow-x: hidden;
  overflow-y: scroll;
}

Bootstrap 移除圆角时弹出框箭头更正

Bootstrap popover arrow correction when rounded corners are removed

twitter-bootstrap-3

popover