javascript - 与LinkedIn Hopscotch的元素对齐

我刚刚开始使用LinkedIn的Hopscotch为新用户创建页面浏览。使用起来似乎很简单，只是所有元素看起来都不对齐，如下图所示。知道怎么解决这个问题吗？
这是我的js代码：

var tour = {
    id: "hopscotch",
    showPrevButton: true,
    steps: [{
        title: "About Me",
        content: "This is the header of my page.",
        target: 'about_edit',
        placement: "bottom",
        xOffset: '-20'
        },
        {
        title: "About Me",
        content: "This is the header of my page.",
        target: 'work_edit',
        placement: "bottom"

    }]
};

// Start the tour!
hopscotch.startTour(tour);

最佳答案

今天遇到这个问题，找到了解决办法。我猜你在用引导程序。
如果是的话，会有一些样式冲突。我的修复方法是覆盖所有元素上使用的边框框的引导框大小：

.hopscotch-bubble-container *{
    box-sizing: content-box;
}