为什么把tinymce放在<div class="row"></div>里面会很难看？

Question

我的 TinyMCE 有问题，如图所示： enter image description here

我的 HTML 是：

<form action="#" method="post" id="create-product">
            <div class="row">
                <div class="col-4">
                    <label for="#product-name">Product name</label>
                </div>
                <div class="col-8">
                    <input type="text" name="product-name" class="form-control"                         id="product-name" placeholder="Product name" required>
                </div>
                <div class="col-4">
                    <label for="#product-category">Product category</label>
                </div>
                <div class="col-8">
                    <select name="product-category" class="selectpicker form-control" id="product-category" required>
                        <option value="null">--none--</option>
                    </select>
                </div>
                <div class="col-4">
                    <label for="#product-description">Product description</label>
                </div>
                <div class="col-8">
                    <textarea name="product-description" id="product-description"></textarea>
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-success create-product-btn w-25 m-auto"><i class="far fa-save"></i>Save</button>
                </div>
            </div>
        </form>

但是如果我删除标签，它会在不知道原因的情况下解决问题。我正在使用 Tinymce 4.7.13 和 bootstrap 4，谢谢

Answer 1

问题出在这个风格上：

 .col-4 ,.col-8{
 display:flex; 
 align-item:center
 }

为什么把tinymce放在<div class="row"></div>里面会很难看？

Why tinymce looks ugly if I put it inside <div class="row"></div>?

html

javascript

tinymce

bootstrap-4