元素与LinkedIn跳房子对齐

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。

如果是这样，则存在一些样式冲突。我的修复是覆盖所有元素上使用的border-box的Bootstrap框大小：

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

Answer 2

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

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