Javascript KendoGrid内引导

我对

bootstrap

不熟悉，我们所有的用户界面都是使用

KendoGrid的

我们想将KendoGrid嵌入引导程序的

模式窗口
，并尝试了下面发布的代码。但是在这里，
close
按钮和
header
在模式窗口之外，看起来很奇怪。我认为这是因为引导css版本。使用bootstrap_2.3.2.min.css尝试时，此问题得到解决。但是我们应该使用v3.2.0。请让我知道是否有任何解决办法



&时代；
$heading
var乘积=[{
产品编号：1，
产品名称：“柴”，
供应商编号：1，
类别：1，
QuantityPerUnit：“10盒20袋”，
单价：18.0000，
单位股票：39，
单位顺序：0，
再订购级别：10，
中止：错误，
类别：{
类别：1，
类别名称：“饮料”，
描述：“软饮料、咖啡、茶、啤酒和啤酒”
},
使命：是的，
允许的东西：假的
}, {
产品编号：2，
产品名称：“Chang”，
供应商编号：1，
类别：1，
QuantityPerUnit：“24-12盎司瓶”，
单价：19.0000，
单位股票：17，
单位订单：40，
再订购级别：25，
中止：错误，
类别：{
类别：1，
类别名称：“饮料”，
描述：“软饮料、咖啡、茶、啤酒和啤酒”
},
使命：是的，
是的
}
];
列设置=[
“产品名称”，
{
字段：“单价”，
标题：“单价”，
格式：“{0:c}”，
宽度：“130像素”
},
{
字段：“单位股票”，
标题：“库存单位”，
宽度：“130像素”
},
{
字段：“中止”，
宽度：“130像素”
}
];
var gridDataSource=new kendo.data.DataSource({
数据：产品，
模式：{
型号：{
id:“uid”，
字段：{
产品名称：{type:“string”}，
单价：{type:“number”}，
UnitsInStock:{type:“number”}，
中断：{type:“boolean”}
}
}
},
排序：{
字段：“”，
目录：“描述”
},
页面大小：50
});
$（文档）.on（'click'，'openmodel'，函数（）{
$（'myModal'）.modal（'show'）；
if（！$（“#网格”）.data（'kendoGrid'））{
createGrid（）；
}
});
函数createGrid（）{
$（“#网格”）.kendoGrid({
数据源：gridDataSource，
可滚动：对，
可重定额：对，
可调整大小：正确，
可分页：{
刷新：是的，
页面大小：[50100200]
},
可过滤：{
额外：错，
操作员：{
字符串：{
包含：“包含”，
开始：“从开始”
},
编号：{
lt:“小于”，
情商：“等于”，
gt:“大于”
},
日期：{
lt:“小于”，
情商：“等于”，
gt:“大于”
}
}
},
可排序：{
模式：“单身”，
allowUnsort:错误
}
});
}
事实上，您忘记了在内容中再嵌入两个
div
：

<div class='modal fade' id='myModal'>
  <div class='modal-dialog'> <!-- First div for setting the dialog -->
    <div class='modal-content'> <!-- Second div for setting the content -->
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
        <h3><strong>$heading</strong></h3>
      </div>
      <div class='modal-body'>
        <div id="grid"></div>
      </div>
    </div>
  </div>
</div>


&时代；
$heading

我已经更新了您的jsbin:
您可以在这里查看旧文档：->标记将在v2.3.2和v3.2.0之间更新…这（以及许多其他更改）也在Bootstrap的2->3迁移文档中介绍：
<div class='modal fade' id='myModal'>
  <div class='modal-dialog'> <!-- First div for setting the dialog -->
    <div class='modal-content'> <!-- Second div for setting the content -->
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
        <h3><strong>$heading</strong></h3>
      </div>
      <div class='modal-body'>
        <div id="grid"></div>
      </div>
    </div>
  </div>
</div>