0

我有点担心 - 作为一个新的 Stack Overflow 用户，我希望我把它发布在正确的地方。

我目前正在修补Froala Editor并且已经学习了很多。但是，当我开始查看文档并对其进行深入研究时，我在集成 Bootstrap 时遇到了一些麻烦。

基本上，我希望它在触发动作时，将预先创建的“块”插入编辑器。我对此功能没有任何问题，但是当该块的内容无法正确显示时，我的问题就开始了。

为了创建自定义块触发器，我集成var widget了 JS（格式化以提高可读性）：

widget = '<a href="#" class="btn btn-success">Bootstrap Works!</a><br>
         <div class="container-fluid">

             <div class="row">

                 <div class="col-xs-6" style="background:yellow;">
                     <h2>Title One</h2>
                     <img src="http://placehold.it/140x140" class="img-circle img-responsive">
                 </div>

                 <div class="col-xs-6" style="background:red;">
                     <h2>Title Two</h2>
                     <img src="http://placehold.it/140x140" class="img-circle img-responsive">
                 </div>

             </div>

         </div>';

选择“第一个小部件”（默认选项）并单击“添加小部件”。一切都按预期工作 - 除了两个col-xs-6's 堆叠在彼此之上，而不是像通常那样浮动到列中。

在此处查看示例：http: //nyit.me/wysiwyg/5-cstm/2.php

我尝试调整.containerand .container-fluid，调整 Froala 中的一些自定义设置（包括padding: 0;and margin: 0;），调整基本body和htmlCSS，但似乎没有任何效果。最终，我觉得我错过了一些超级简单的东西，并且完全过度思考了这一点。

感谢您的任何建议！

z

4

1 回答 1

0

您遇到的问题与box-sizing. Github 上有一个提交可以解决您的问题。

于 2015-03-17T13:03:25.730 回答