Styliser le contenu de Kendo Window avec Bootstrap

J’ai une fenêtre de Kendo générique que je réclame pour différentes vues partielles. Je ne parviens pas à atsortingbuer un style au contenu à l’aide de bootstrap, car cela entraîne différentes dispositions dans différents navigateurs et des éléments toujours encombrés.

Ceci est un exemple:

   @Html.LabelFor(m => m.2, new { @class = "col-xs-4 control-label" }) @Html.DisplayFor(m => m.2) 
  @Html.LabelFor(m => m.3, new { @class = "col-xs-4 control-label" }) @Html.DisplayFor(m => m.3) 
 
   @Html.LabelFor(m => m.4, new { @class = "col-xs-4 control-label" }) @Html.DisplayFor(m => m.4) 
  @Html.LabelFor(m => m.5, new { @class = "col-xs-4 control-label" }) @Html.DisplayFor(m => m.5) 
 
 
  
  
 @(Html.Kendo().Grid() ....

Et ligne:

 .line{ line-height: 20px; }

Est-ce que je manque quelque chose? Je veux juste avoir une mise en page à 2 colonnes. Pouvez-vous me donner un exemple s’il vous plaît?

Je ne sais pas pourquoi, mais je devrais utiliser col-xs-5 . De plus, pour conserver des éléments à l’intérieur d’une tab ssortingp je dois les mettre à l’intérieur d’un container .

   
 
 
  
 
 
 ......

MISE À JOUR J’ai trouvé la solution à leurs documents .

Vous devez d’abord append les références suivantes.

Ajoutez ensuite le CSS suivant à votre site.css et incluez-le dans la page:

 /* 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; }

Et tout fonctionne bien, vous devriez pouvoir utiliser les éléments suivants:

   
 
 
  
 
 
 ......

Vous aurez probablement besoin de quelque chose comme ça. Jouez avec les largeurs de colonne en fonction de vos étiquettes.

   @Html.LabelFor(m => m.2, new { @class = "control-label" }) 
  @Html.DisplayFor(m => m.2) 
 
   @Html.LabelFor(m => m.3, new { @class = "control-label" }) 
  @Html.DisplayFor(m => m.3) 
 
   @Html.LabelFor(m => m.4, new { @class = "control-label" }) 
  @Html.DisplayFor(m => m.4) 
 
   @Html.LabelFor(m => m.5, new { @class = "control-label" }) 
  @Html.DisplayFor(m => m.5)