Kendo Popup 自定义编辑器模板中的 Bootstrap Accordion答案

【问题标题】：Bootstrap Accordion within Kendo Popup Custom Editor TemplateKendo Popup 自定义编辑器模板中的 Bootstrap Accordion
【发布时间】：2018-01-05 14:08:19
【问题描述】：

我在 Kendo Grid 的 Kendo 弹出自定义编辑器模板中有一个 Bootstrap Accordion。

然而，它给我的手风琴带来了一些问题。

1) 展开手风琴“面板”时，手风琴过度展开并弹回以适应内容。

2) 手风琴标题在鼠标悬停时没有“手”光标，而是有文本光标。

这是我的 HTML：

    <style>

    .popup {
        width: 100%;
        padding-top: 20px;
        padding-right: 30px;
        padding-left: 30px;
    }


    .k-window-content * {                   /* Added to fix the Bootstrap within Kendo border-box vs content-box box-sizing property issue. */   
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
</style>

<div class="container popup">

    <div class="panel-group" id="accordion">
        <!-- First Panel -->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title"
                    data-toggle="collapse"
                    data-target="#collapseOne">
                    Collapsible Group Item #1
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit,
                    enim eiusmod high life accusamus terry richardson ad squid.
                </div>
            </div>
        </div>

        <!-- Second Panel -->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title"
                    data-toggle="collapse"
                    data-target="#collapseTwo">
                    Collapsible Group Item #2
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit,
                    enim eiusmod high life accusamus terry richardson ad squid.
                </div>
            </div>
        </div>

        <!-- Third Panel -->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title"
                    data-toggle="collapse"
                    data-target="#collapseThree">
                    Collapsible Group Item #3
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit,
                    enim eiusmod high life accusamus terry richardson ad squid.
                </div>
            </div>
        </div>
    </div>


    </div>

有谁知道为什么会发生这种情况？我的猜测是手风琴在 Kendo 弹出窗口中的事实意味着某些样式受到了影响。谢谢。

【问题讨论】：

尝试从此链接“docs.telerik.com/kendo-ui/third-party/…”添加css规则。为了在 kendo 窗口或对话框中使用 Bootstrap 类并使其按预期工作，您应该添加文章中提到的规则。我不知道它是否能解决您的问题，但大多数 css 问题都来自于此。
你试过添加评论中提到的css规则吗？

标签： javascript jquery css twitter-bootstrap kendo-asp.net-mvc

【解决方案1】：

添加此项以更改光标样式：

.panel-heading:hover{
        cursor:pointer;
    }

您需要在哪里弹出模型？

【讨论】：

手风琴在剑道弹出窗口中
我之前没有在剑道工作过，很抱歉，光标是否有效？