用的栅格布局,电脑和平板正常,手机显示有些BUG.

[issmile]

1,中间间距超大,看源码是加了16px margin,为啥要这样?这种2栏布局普遍的,应该考虑到这个需求,我想自定义,但是不知道该如何操作?如果要自定义的话,应该怎么弄?我要在源码上修改的话,你以后要是一升级我就头大了: 我尝试直接定义CSS结果代码不响应了,直接变成两列了.常识在组件CSS标签下加LESS标签,结果没反应...webpack根本不会...无奈只能提问了

2按钮在一般分辨率下突出严重,除了iPhone6p分辨率正常,其他分辨率都有突出情况,用的是button-row

 <div v-el:scroller class="my-content">
      <content-block>
        <p class="refresh-desc">
           向下滑动可以加载更多的数据
        </p>
      </content-block>
          <grid-row gutter >
            <grid-col width="50" tablet="15" v-for="item in items">
            <card>
                  <my-Item-Media >
                    <a isconvert=1 biz-itemid="{{item.szItemId}}" href="https://item.taobao.com/item.htm?&id={{item.szItemId}}" target="_black" style="display: flex;justify-content:center;"><img v-lazy="item.imgURL+'_260x260.jpg'"/></a>

                  </my-Item-Media>
                  <item-content style="justify-content: flex-start;">
                    <item-title-row>
                      <item-title>{{item.title}}</item-title>
                      <item-title-after>2014-12-23</item-title-after>
                    </item-title-row>
                    <item-sub-title>
                      {{item.promotionTxt}}
                    </item-sub-title>
                    <item-text style="color:red">
                      {{item.fThirdPrice}}
                    </item-text>
                        <button-row style="width: 100%;">
                          <button fill raised color="" style="background-color: #CA86D2;flex:1 1" text="优惠券">紫色</button>
                          <button fill raised color="blue" style="flex:1 1" text="">蓝色</button>
                        </button-row>
                  </item-content>
              </card>
            </grid-col>
          </grid-row>

      <infinite-scroll :trigger="$els.scroller" @load="loadMore" :loading="loading"></infinite-scroll>
    <!-- </content> -->
    </div>

[myronliu347]

1. card 本身的样式是有 margin: 8px 的，所以加载grid 的16px 就显得超大了。 你在card组件上把左右两边的margin去掉

<card style="margin-left: 0; margin-right:0;"></card>

1. button 是设有 min-width: 64px 这里是宽度不够，所以溢出了。

[myronliu347]

另外，你这个item-content组件最好不要单独使用，此组件是配合 list / item 这类使用的

[issmile]

好的,O(∩_∩)O谢谢,另外请问如何优雅的自定义less?只有直接加style 吗?

[myronliu347]

还是和正常一样，写 class;

<card class="demo-no-gutter"></card>
<style>
.demo-no-gutter{
    margin-left: 0;
    margin-right:0;
}
</style>

[issmile]

less变量无法用哦.....我现在的土办法是直接复制组件源码 ,新建个组件.....哈.不过感觉这样不科学....所以我想在代码框架上是否可以加个什么扩展less的办法?

[myronliu347]

@import "vue-carbon/src/utils/_var.less";
@import "vue-carbon/src/utils/_mixins.less";

[issmile]

谢谢我去研究下怎么弄