包含引导列的 Tabstrip

Posted 2023-05-07

【中文标题】包含引导列的 Tabstrip

【英文标题】：Tabstrip containing bootstrap columns

【发布时间】：2014-01-25 14:36:53

【问题描述】：

我有一个 Kendo 选项卡，我正在尝试将两个具有 col-md-6 类的 div 并排放在一个选项卡项中。它们不是有 2 列，而是相互堆叠。如果我将它们中的任何一个更改为 col-md-5 或更小，它们就可以正常工作。有没有人遇到过这个问题并找到了罪魁祸首？

【参考方案1】：

这可能更像是一个“黑客”而不是修复，但这就是我们解决它的方法

创建一个类，我们称之为 boxFix

.boxFix *,
.boxFix *::before,
.boxFix *::after 
  -moz-box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;

然后是剑道标签条

<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>

就像我说的那样，这可能更像是一种黑客行为......但我希望它会有所帮助。

【讨论】：

抱歉耽搁了！这最终正是我所做的！感谢您的帮助。

【参考方案2】：

我遇到了与 OP 相同的问题；但是，我正在使用 Telerik MVC 包装器，它已经在选项卡内容 div 上放置了一个 k-content 类。因此，我通过重用 Telerik / Bootstrap 类而不是创建新类来实现 Josh 的建议。

.k-content > .row > *,
.k-content > .row > *::before,
.k-content > .row > *::after 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

【讨论】：

感谢和抱歉耽搁了！但这两个帖子最终都正是我所做的。感谢您的帮助。

【参考方案3】：

我遇到了同样的问题并使用http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap#nest-widgets-and-bootstrap-grid-layout解决了它

这是一个工作示例 http://dojo.telerik.com/@Xavier/iYAW/2

【讨论】：

这对我有用，我认为这是最好的答案。

即使在道场中也无法正常工作。也许他们已经改变了其他东西......再次。