• react 响应式栅格布局

    遇到一个小问题 , 有很多的下拉框放在了一行的盒子里 用到了栅格思路 , 但响应式处理屏幕时候右侧的按钮会覆盖掉样式


    之前我的思路是子绝父相 , 将按钮定在最右侧 , 按钮和下拉框都在同一盒子中 , 且做了栅格处理没想到还是会覆盖

    解决 : 后来我用到了  margin-left: auto 来让按钮靠右对齐


    代码 : 
     

    1.     
      'tableTop2'>
    2.           <Form form={form}>
    3.             <Row gutter={24}>
    4.               <Col span={4.8}>
    5.                // 输入框的内容
    6.               Col>
    7.               .....
    8.              
    9.               <Col className='btnALL' span={4.8}>
    10.               // 按钮的内容
    11.            
    12.               Col>
    13.             Row>
    14.           Form>
    15.
  • .tableTop2 {
  • margin: 10px 0 0 10px;
  • min-height: 125px;
  • // position: relative; 之前的写法
  • .btnALL {
  • // position: absolute;
  • // right: -10px;
  • // bottom: 20px;
  • padding-bottom: 20px; // 现在的写法
  • margin-left: auto;
  • }
  • }

  • 相关阅读:
    Spring总结的question
    Linxu 【权限，粘滞位】
    Zabbix监控环境搭建，监控项简单、高级应用，包括自定义监控项、采集器、自动发现规则、监控项原型、宏
    PMSM——转子位置估算基于QPLL
    AI二次开发C#图案颜色
    Python字符串处理：掌握文本的艺术
    专访清华裘捷中：亚洲高校首个KDD最佳博士论文奖是如何炼成的？
    3.事务篇【mysql高级】
    Spring+SpringMVC+Mybatis（开发必备技能）01、基础idea环境配置
    GD32F103 ADC
  • 原文地址：https://blog.csdn.net/Kyrie_mvp/article/details/137973503