本文介绍了包含引导列的标签条的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个 Kendo 标签条,我试图将两个带有 col-md-6
类的 div 并排放置在一个标签条项目中.它们不是有 2 列,而是彼此堆叠.如果我将它们中的任何一个更改为 col-md-5
或更小,它们都可以正常工作.有没有人遇到过这个问题并找到了罪魁祸首?
解决方案
这可能更像是一个黑客"而不是修复,但这就是我们解决它的方法
创建一个类,我们称之为 boxFix
.boxFix *,.boxFix *::before,.boxFix *::after {-moz-box-sizing: border-box !important;-webkit-box-sizing: border-box !important;box-sizing: border-box !important;}
然后是剑道标签条
<ul><li class="k-state-active">选项卡 1<li>选项卡 2<li>选项卡 3悉尼<div><div class="boxFix"><!--bootstrap 网格再次工作-->
<div><div class="boxFix"><!--bootstrap 网格再次工作-->
<div><div class="boxFix"><!--bootstrap 网格再次工作-->
就像我说的,这可能更像是一种黑客攻击……但我希望它有所帮助.
I have a Kendo tabstrip and I'm trying to put two divs with the col-md-6
class side by side inside a tabstrip item. Instead of having 2 columns, they stack on top of each other. If I change any of them to col-md-5
or smaller, they work correctly. Has anyone had this problem and found the culprit?
解决方案
This might be more of a 'hack' than a fix, but this is how we got around it
create a class, lets call it boxFix
.boxFix *,
.boxFix *::before,
.boxFix *::after {
-moz-box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
}
Then for the kendo tab strip
<div id="tabstrip">
<ul>
<li class="k-state-active">
tab 1
</li>
<li>
tab 2
</li>
<li>
tab 3
</li>
Sydney
</li>
</ul>
<div>
<div class="boxFix">
<!--bootstrap grids work again-->
</div>
</div>
<div>
<div class="boxFix">
<!--bootstrap grids work again-->
</div>
</div>
<div>
<div class="boxFix">
<!--bootstrap grids work again-->
</div>
</div>
Like I said this is probably more of a hack... but I hope it helps.
这篇关于包含引导列的标签条的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!