ant-design中a-row的gutter

这个属性gutter为什么要这么设置

设置的row的margin为负数,设置col的padding为正数,

阅读 5.7k
1 个回答

就是对齐最外面这一圈与容器盒子。

<container>
   <a-row>
      <a-col></a-col>
      <a-col></a-col>
      <a-col></a-col>
   </a-row>
   <a-row>
      <a-col></a-col>
      <a-col></a-col>
      <a-col></a-col>
   </a-row>
</container>

image.png

注意左侧和右侧的列,跟外容器之间是没有间隙的。

无论你单独调整 margin 还是单独调整 padding,都达不到 container 跟里面的元素是对齐的效果。

当然你也可以用 CSS 伪类(:first-child、:last-child 那几个)去控制,但维护起来显然不如现在这样方便。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题