界面控件 ROW 的 上下边距设置问题。

zengxinle

官方技术人员：

    X5 V3.2 中，官方提供 ROW 布局控件，其 CLASS = X-ROW  的设置中 ，padding 的原始值是：5px ，使得在桌面电脑上，两行之间的行间距太大，使得页面的显示效果不紧密。
    本人通过 查找 相关的客户端源代码，发现 ROW 布局控件 的 padding 设置在：comp.min.css 文件中，但修改它没有用，后来修改：comp.min.desktop.css 中的 padding =1px ，在桌面机（desktop）上才能有效果。 修改 comp.min.css 只在小分辨率的显示器有效果。
    现在的问题是： X5 在 UI2\system\components 下，有多个类似文件，只是中间名有差异，它们的目标有何不同？
       comp.min.css；
      comp.min.desktop.css；
      comp.min.flatly.css；
      comp.min.slate.css；
      comp.min.superhero.css；
      comp.min.united.css；
      comp.min.yeti.css。

      上述文件，差异是中间的 desktop、flatly、slate、superhero、united、yeti ，文件中的内容基本差不多，请问有何具体的区别？   请官方提供一个解释，THANKS ！

jishuang

参考http://doc.wex5.com/?p=4827

zengxinle

按官方的文档说明，自行编辑了一个：myCSS.CSS 文件，将此文件，通过  INDEX.W 文件引入，OK ，一切满足要求！  内容如下：

--------------------------------------------------------------------------------------------------------------------
/* 1、网格 GRID 的行间隔调整：                                                             */
/*    文件：/UI2/system_X/components/justep/grid/css/grid.desktop.css  */
/*    修改内容是： padding 的 值，原始值是：padding: 8px 4px 8px 4px; 即将 上下间距调整小。       */

/*    由于 /UI2/system/components/justep/grid/css/grid.css  的优先级比较 本文件（myCSS.CSS）更高 */
/*    特别增加 padding 参数的优先级，使用：!important                                                                      */

.x-grid tr.jqgrow td {
  overflow: hidden;
  white-space: pre;
  height: 22px;

  padding: 3px 4px 3px 4px !important;

  border-top-width: 1px;
  border-top-color: #dddddd;
  border-top-style: solid;
}


/* 2、表单 FORM 中行间距调整：                                        */
/*   直接修改：/UI2/system_X/components/bootstrap.min.desktop.css     */
/*   margin-bottom:15px 修改为：margin-bottom:5px                     */

.form-group{
  margin-bottom:5px
}


/* 3、row 与 col 布局控件 的行间距调整。                     */

/*    文件： /UI2/system_X/components/comp.min.desktop.css   */

/*      -------- padding: 原始值为：5px                      */

.x-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 2px;      
  width: 100%;
}

.x-col {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: block;
  padding: 1px;
  width: 100%;
}