Html 为什么jSignature div会移动到浏览器窗口的左上角？

我正在使用引导，并尝试将jSignature小部件添加到表单中。我按照他们网站上的说明，添加了一个div（在我的例子中，它的id是“signature”），然后使用以下命令

<!--[if lt IE 9]>
<script type="text/javascript" src="libs/flashcanvas.js"></script>
<![endif]-->
<script src="libs/jSignature.min.js"></script>
<div id="signature"></div>
<script>
    $(document).ready(function() {
        $("#signature").jSignature()
    })
</script>

$（文档）.ready（函数（）{
$（“#签名”）.jSignature（）
})

表单中包含div的部分如下所示

<div class="form-group">
 <label for="signature"class = "col-md-2 control-label">Signature</label>
  <div class="col-md-10">
    <div id="signature"></div>
  </div>
</div>

签名

这与表单的其余部分格式完全相同

但是，当我在浏览器中查看时，jSignature小部件出现在窗口的左上角，部分被Bootsrap导航栏遮挡，而不是像应该的那样位于标签旁边

如果我看一下源代码，signature div的位置是正确的，但是Chrome开发者工具显示它已经移动到body标签的最开始，这大概就是为什么它最终会这样做

---

有人知道它为什么这样做吗？我希望它保持在应该的位置。

检查您的

#签名

元素，查看它是否在

样式

属性中定义了样式属性。如果是这样，它的样式将被JavaScript更改。

col md

用于等于或大于992px的内容宽度。你确定你的内容所在的部分是992px或更宽吗？如果不是，那么它会把div放在你的标签后面。此外，我们还必须知道什么类型的引导导航栏（如果您使用的是引导导航栏），以了解为什么会被阻塞。许多引导工具栏实现依赖于

body{padding top:65px；}

等样式，以便页面的顶部内容不会被遮挡。James-my signature div尽可能简单，它是一个普通的div标签，id为“signature”，其他什么都没有。在试图找出问题所在的同时，我添加了一些样式（高度和宽度），但这是在页面其他地方的样式部分。如果我不设置高度和宽度，它将占据整个窗口的宽度，但仍然位于顶部。MattD，内容小于992px，但这不重要。表单的其余部分也小于该宽度，但在大多数设备上，标签都位于表单元素的左侧，而在tweeny设备上则位于表单元素的上方。无论哪种方式，所有元素都保留在它们应该相对于身体结构的位置。这个小部件被完全移动到了不合适的位置，并且似乎正好位于body标签的顶部，在表单之外。我使用的是引导导航栏，但我认为这与此无关，因为主要问题是小部件被移动。