Kendo Модальные окна и проблемы с бутстрапом

Я использую окно Kendo Modal и bootstarp. У меня есть окно кендо и нужно разбить два div с колонкой. Для гибкого дизайна я должен использовать классы начальной загрузки, такие как row и col-md-12.Kendo Модальные окна и проблемы с бутстрапом

HTML:

<body> 
    <button onclick='myFunction()'>Open Window</button> 
    <div id="win1"> 
    <div class="row"> 
     <div class="col-md-6" style="border:1px solid Red;"> 
     First 
     </div> 
     <div class="col-md-6" style="border:1px solid Blue;"> 
     Second 
     </div> 
    </div> 
    </div> 
</body>

JS:

<script> 
    function myFunction() { 

     $("#win1").show().kendoWindow({ 
     width: "300px", 
     height: "200px", 
     modal: true, 
     title: "Window 1", 
     }); 
    } 
    </script>

Я знаю, что Bootstarp класс строка делится на 12 частей. Итак, первый и второй div должны появиться в первой строке. Почему он отображается в два ряда. Это мой plunk

источник

2016-06-09 user2323308

Это CSS-размер вопрос. См. Это: http://stackoverflow.com/questions/31140070/bootstrap-3-grid-system-does-not-work-correctly-within-a-3rd-party-styled-div-k/3 – ezanker

Как упоминалось в ссылку, я включил «kendo.common-bootstrap.min.css» и «kendo.bootstrap.min.css». Все еще проблема сохраняется. Любые другие, что мне нужно сделать, чтобы исправить эту проблему? – user2323308

Вы пропустили вопрос о размерах коробки. Вам нужно установить его в рамку для любых элементов начальной загрузки, которые находятся в виджетах kendoui: http://stackoverflow.com/questions/20979648/tabstrip-containing-bootstrap-columns – ezanker

При открытии инспекторов вы можете увидеть, что есть ошибка:

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

Это означает, что Bootstrap не загружается должным образом и CSS используется создать столбцы не работают. Вы можете видеть, что ему не хватает этих стилей:

widht:50%; float:left;

Если вы примените их вручную, вы увидите, что он работает.

источник

2016-06-09 08:26:09

Не получается ошибка. Зачем нужна ширина 50%, она должна обрабатываться bootstarp – user2323308

Да, я знаю. Но он не обрабатывается bootstrap, поэтому это означает, что есть что-то неправильное с включением файла. –

Bootstarp css неправильно включен, поэтому он показывает ошибку? Bootstrap href-https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css, который правильно открывает css – user2323308

Если вы проверите элементы в вашем блоке, вы увидите, что для них нет назначенной ширины. Вы использовали правильные классы/структуру, но это не удалось загрузить, как сказал Арьян Кнол.

Попробуйте загрузить бутстрап по-другому, чтобы он загружался, и вы должны пожелать результатов.

источник

2016-06-09 08:30:44

У меня было это тоже. Это вопрос размерности коробки, как указывает ezanker. Поэтому я добавил этот класс мой глобальный CSS:

.border-box, .border-box * { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 

    [class^="k-"] { 
     -webkit-box-sizing: content-box; 
     -moz-box-sizing: content-box; 
     box-sizing: content-box; 
    } 
}

, а затем, если я помещаю содержимое внутри кендо окна, шаблон, и т.д. Я обернуть его с этим классом:

<div class="border-box"> 
    ...form groups, controls, etc. 
</div>

источник

2016-12-06 18:41:50

Kendo Модальные окна и проблемы с бутстрапом

ответ

Смежные вопросы