gpt4 book ai didi

jquery - 2 col-md-6 没有在我的剑道网格中并排排列。

转载 作者:行者123 更新时间:2023-12-01 08:36:04 25 4
gpt4 key购买 nike

我在让 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com