CodeMirror-sizer左边距等于父母的宽度

Question

我正在使用Bootstrap 3.3.6和CodeMirror 5.40.2

.CodeMirror中的所有div基本上都没有意义的宽度，高度和边距值。

.CodeMirror显示了width: 517px和height: 345px，这正是我想要的。问题出在它的子节点上，它们的子节点有愚蠢的内联CSS，例如width: 0等。

父div只是一个.col-sm-12 div，其中没有其他内容。
将editor.setSize("100%", "100%");添加到Java脚本后，一切都没有改变。
如果我将lineNumber设置为false，将不再有剩余的空白，但是尺寸仍然很可笑。 （简单地说：内容向左显示517px）

所以我的问题取决于：“我在哪里使用CodeMirror时错过了什么？”

这是代码：

HTML：

<!-- My code -->
<label for="sql-input">SQL :</label>
<textarea class="form-control code-textarea" rows="10" id="sql-input" style="display: none;"></textarea>
<!-- Start of the codemirror stuff -->
<div class="CodeMirror cm-s-default">
  <div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 38px; left: 507px;">
    <textarea style="position: absolute; bottom: -1em; padding: 0px; width: 1px; height: 1em; outline: currentcolor none medium;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" wrap="off"></textarea>
  </div>
  <div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true" style="width: 18px; pointer-events: none; display: block; bottom: 0px;">
    <div style="min-width: 1px; height: 108px;"></div>
  </div>
  <div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true" style="display: block; right: 0px; left: 517px; height: 18px; pointer-events: none;">
    <div style="height: 100%; min-height: 1px; width: 518px;"></div>
  </div>
  <div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
  <div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
  <div class="CodeMirror-scroll" tabindex="-1" draggable="true">
    <div class="CodeMirror-sizer" style="margin-left: 517px; margin-bottom: 0px; border-right-width: 30px; min-height: 60px; min-width: 13.5px; padding-right: 0px; padding-bottom: 0px;">
      <div style="position: relative; top: 0px;">
        <div class="CodeMirror-lines" role="presentation">
          <div style="position: relative; outline: currentcolor none medium;" role="presentation">
            <div class="CodeMirror-measure">
              <span>
                <span>
                  ​&bull;
                </span>
                x
              </span>
            </div>
            <div class="CodeMirror-measure"></div>
            <div style="position: relative; z-index: 1;"></div>
            <div class="CodeMirror-cursors" style="">
              <div class="CodeMirror-cursor" style="left: 10.5px; top: 0px; height: 39.5667px;">
                &nbsp;
              </div>
            </div>
            <div class="CodeMirror-code" role="presentation">
              <div style="position: relative;">
                <div class="CodeMirror-gutter-wrapper" style="left: -506.5px;">
                  <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 15px; width: 518px;">
                    1
                  </div>
                </div>
                <pre class=" CodeMirror-line " role="presentation">
                  <span role="presentation">
                    <span cm-text="">
                  ​    ​&bull;
                    </span>
                  </span>
                </pre>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="position: absolute; height: 30px; width: 1px; border-bottom: 0px solid transparent; top: 60px;"></div>
    <div class="CodeMirror-gutters" style="height: 90px; left: 10.5px;">
      <div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 518px;"></div>
    </div>
  </div>
</div>
<!-- End of the codemirror code -->

JS：

var editor = document.getElementById('sql-input');
$("#sql-input").each(function (i) {
  editor = CodeMirror.fromTextArea(this, {
    lineNumbers: true,
    mode: 'sql'
  });
  editor.on("change", function() {
    document.getElementById('question-preview').innerHTML = editor.getValue('<br>')
      .replace('<?','&lt;?')
      .replace('?>', '?&gt;')
      .replace('<script>', '&lt;script&gt;')
      .replace('<script>', '&lt;/script&gt;')
      .replace('<div>', '&lt;div&gt;')
      .replace('</div>', '&lt;/div&gt;');
  });
});