javascript - 使用 LinkedIn Hopscotch 进行元素对齐

Question

我刚刚开始使用 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);

Answer 1

今天刚遇到这个，找到了解决方法。我假设您正在使用 Bootstrap。

如果是这样，则存在一些样式冲突。我的解决方法是覆盖所有元素上使用的边界框的引导框大小：

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

Answer 2

这已作为 Hopscotch 0.2.2 的一部分得到修复，使其与 Bootstrap 兼容。

https://github.com/linkedin/hopscotch/issues/75