2 col-md-6 在我的 kendo 网格 detailTemplate 中没有并排排列

Question

我在让 col-md-6 在我的网格的 detailTemplate 中并排排列时遇到问题。

如果我没有在 detailTemplate 中这样做，那么它工作正常，只是不在这里，我不确定为什么

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

Answer 1

此问题与 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>

2 col-md-6 在我的 kendo 网格 detailTemplate 中没有并排排列

2 col-md-6's not lining up side by side in my kendo grid detailTemplate

jquery

twitter-bootstrap

kendo-ui

kendo-grid

kendo-template