我在让 col-md-6 在网格的详细模板中并排排列时遇到问题。
如果我没有在详细模板中执行此操作，那么它可以正常工作，只是不在此处，我不确定为什么
$(document).ready(() => {
var data = [{
ID: 1,
FirstName: "PersonA",
LastName: "123"
},
{
ID: 2,
FirstName: "PersonB",
LastName: "456"
},
{
ID: 3,
FirstName: "PersonC",
LastName: "789"
}
];
$("#GridList").kendoGrid({
dataSource: {
data: data
},
schema: {
model: {
fields: {
ID: {
type: "number"
},
FirstName: {
type: "string"
},
LastName: {
type: "string"
}
}
}
},
filterable: false,
columns: [{
field: "ID",
title: "ID",
hidden: true
},
{
field: "FirstName",
title: "FirstName"
},
{
field: "LastName",
title: "LastName"
}
],
scrollable: true,
sortable: true,
pageable: false,
selectable: "row",
reorderable: false,
groupable: false,
resizable: true,
columnMenu: false,
change: function(e) {
var row = $(this).closest('tr');
var prev = row.prev();
console.log(prev);
},
detailInit: function(e) {},
detailTemplate: kendo.template($('#mytemplate').html()),
height: 500
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script type="x-kendo-template" id="mytemplate">
<div id="VIACInfoWrapper" style="height:300px; border:1px solid black">
<div class="container-fluid">
<div id="VIACIRow" class="row" style="background:fuchsia;">
<div class="col-md-12">
<div class="row">
<div class="col-md-6" style="height:100px; background:yellow"></div>
<div class="col-md-6" style="height:100px; background:blue"></div>
</div>
</div>
</div>
</div>
</div>
</script>
<div id="GridList"></div>最佳答案
此问题与 Kendo UI 和 bootstrap 使用冲突的 box-sizing 属性有关，this documentation 中对此进行了描述。
它们提供了一些 css 规则来解决该问题，并且在应用于您的示例时它们似乎确实有效:
$(document).ready(() => {
var data = [{
ID: 1,
FirstName: "PersonA",
LastName: "123"
},
{
ID: 2,
FirstName: "PersonB",
LastName: "456"
},
{
ID: 3,
FirstName: "PersonC",
LastName: "789"
}
];
$("#GridList").kendoGrid({
dataSource: {
data: data
},
schema: {
model: {
fields: {
ID: {
type: "number"
},
FirstName: {
type: "string"
},
LastName: {
type: "string"
}
}
}
},
filterable: false,
columns: [{
field: "ID",
title: "ID",
hidden: true
},
{
field: "FirstName",
title: "FirstName"
},
{
field: "LastName",
title: "LastName"
}
],
scrollable: true,
sortable: true,
pageable: false,
selectable: "row",
reorderable: false,
groupable: false,
resizable: true,
columnMenu: false,
change: function(e) {
var row = $(this).closest('tr');
var prev = row.prev();
console.log(prev);
},
detailInit: function(e) {},
detailTemplate: kendo.template($('#mytemplate').html()),
height: 500
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
/* reset everything to the default box model */
*, :before, :after
{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* set a border-box model only to elements that need it */
.form-control, /* if this class is applied to a Kendo UI widget, its layout may change */
.container,
.container-fluid,
.row,
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<script type="x-kendo-template" id="mytemplate">
<div id="VIACInfoWrapper" style="height:300px; border:1px solid black">
<div class="container-fluid">
<div id="VIACIRow" class="row" style="background:fuchsia;">
<div class="col-md-12">
<div class="row">
<div class="col-md-6" style="height:100px; background:yellow"></div>
<div class="col-md-6" style="height:100px; background:blue"></div>
</div>
</div>
</div>
</div>
</div>
</script>
<div id="GridList"></div>关于jquery - 2 col-md-6 没有在我的剑道网格中并排排列。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55087466/