包含引导列的标签条 [英] Tabstrip containing bootstrap columns

查看：14
本文介绍了包含引导列的标签条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个 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.

这篇关于包含引导列的标签条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆