Question

我正在Bootstrap网格中使用DraftJS作为ReactJS表单，由于某种原因，DraftJS编辑器没有扩展到Bootstrap列的整个宽度。我有一个网格设置，其中有一个文本字段（DraftJS）（9列），然后在它的右边是一个按钮，用于提交表单（3列），但是到目前为止，DraftJS编辑器可能代表一列然后按钮被推到下一行（见图）。我曾尝试将width: 100%应用于9栏，但这没有影响。我看到添加了DraftJS组件会注入一堆div和唯一类，并且我想知道是否存在CSS样式可能导致输入字段被截断，但是我似乎看不到是什么在驱动它。有什么方向看？

HTML（包括DraftJS原始HTML）：

<div className="row">
    <form id="comment-form">
        <div className="col-md-9">
            <div className="editor" onClick={this.focus}>
                <div class="DraftEditor-root">
                    <div class="DraftEditor-editorContainer">
                        <div aria-autocomplete="list" aria-describedby="placeholder-71q5n" aria-expanded="false" class="notranslate public-DraftEditor-content" contenteditable="true" role="combobox" spellcheck="false" 
                        style="
                            outline: none; 
                            user-select: text; 
                            white-space: pre-wrap; 
                            overflow-wrap: break-word;
                        ">
                            <div data-contents="true">
                                <div class="" data-block="true" data-editor="71q5n" data-offset-key="mu84-0-0">
                                    <div data-offset-key="mu84-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key="mu84-0-0"><br data-text="true"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div className="col-md-3">
            <button type="submit" className="btn btn-primary">Comment</button>
        </div>
    </form>
</div>

Css：

.editor {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #ddd;
  cursor: text;
  padding: 16px;
  width: 100%;
  border-radius: 2px;
  margin-bottom: 2em;
  -webkit-box-shadow: inset 0px 1px 8px -3px #ABABAB;
          box-shadow: inset 0px 1px 8px -3px #ABABAB;
  background: #fefefe; }

.editor :global(.public-DraftEditor-content) {
  min-height: 140px; }

DraftJS将编辑器扩展到列的全宽

0 个答案: