Я немного в замешательстве, и, как новый пользователь Stack Overflow, я надеюсь, что публикую это в нужном месте.
В настоящее время я работаю с редактором Froala и многому научился. Однако когда я начал изучать документацию и углубляться в нее, у меня возникли проблемы с интеграцией 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 расположены друг над другом вместо того, чтобы плавать в столбцы, как это обычно бывает.
Посмотрите пример здесь: http://nyit.me/wysiwyg/5-cstm/2.php
Я пытался настроить .container и .container-fluid, настроить некоторые пользовательские настройки в Froala (включая padding: 0; и margin: 0;) и настроить основные body и html CSS, но ничего не работает. В конечном счете, у меня такое чувство, что я упускаю что-то очень простое и полностью обдумываю это.
Спасибо за любой совет!
z
