Question

我正在为我的MVC 5应用程序实现css。我有一个问题，关于将样式应用于类似控件时的最佳实践，这些控件可能在少数属性中有所不同，但可能有其他共同点。在我的应用程序中，我将创建几个kendo网格。宽度各不相同，但其余部分相同。

#grid {
    margin-top:80px;
    vertical-align:central;
    overflow:hidden;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0px;

}

#teamGrid {
    margin-top:80px;    
    vertical-align:central;
    overflow:hidden;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0px;
    width:900px;
}

UI

<div id="teamGrid"></div>


<script>

    $(document).ready(function () {


        var teams = [
            { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 },
            { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 },
            { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 },
            { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 },
            { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 },
            { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 },
            { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 },
            { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 },
            { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 },
            { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 },
            { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 },
            { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 },
            { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 }
        ];

        var teamDataSource = new kendo.data.DataSource({ data: teams, pageSize: 20, sort: { field: "TeamName", dir: "asc" } });
        teamDataSource.read();

        $("#teamGrid").kendoGrid({
            dataSource: teamDataSource,
            columns: [
                { field: "CountryCode", title: "Country Code", width:"50px" },
                { field: "TeamName", title: "Team Name", width: "50px" },
                { field: "TeamDescription", title: "Team Description", width: "70px" },
                { field: "IsActive", title: "Active", width: "50px" },
                { command: ["edit", "destroy"], width: "100px" }
            ],

            scrollabe:false,
            pageable: true,
            sortable:true,
            //groupable: true,
            filterable: true,
            editable: (editable => editable.Mode(GridEditMode.Popup))

        });

    });

</script>

Answer 1

使用类将属性设置为所有 .grids
您必须将类.grids设置为 #grid 和 #tegGrid < /强>

.grids{ margin-top:80px; vertical-align:central; overflow:hidden; margin-left:auto; margin-right:auto; margin-bottom:0px; } #grid { } #teamGrid { width:900px; }

Css应用类似样式的最佳实践

1 个答案: