react 响应式栅格布局

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


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

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


代码 : 
 

    <div className='tableTop2'>
          <Form form={form}>
            <Row gutter={24}>
              <Col span={4.8}>
               // 输入框的内容
              </Col>
              .....
             
              <Col className='btnALL' span={4.8}>
              // 按钮的内容
           
              </Col>
            </Row>
          </Form>
        </div>




  .tableTop2 {
    margin: 10px 0 0 10px;
    min-height: 125px;
    // position: relative;   之前的写法

    .btnALL {
      // position: absolute;
      // right: -10px;
      // bottom: 20px;


      padding-bottom: 20px;    // 现在的写法
      margin-left: auto;
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/557513.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vue3 echarts 图表主题切换

我主要是用了localStorage和composable来实现的。 先创建composable文件夹存储composable的操作方法&#xff1b; 在App.vue文件里面&#xff0c;先将主题数据存储在localStorage里面&#xff1b; 主题切换 图表theme包更换 为什么要用composable呢&#xff1f; 单纯的使用…

记录——FPGA的学习路线

文章目录 一、前言二、编程语言2.1 书籍2.2 刷题网站2.3 仿真工具 三、基础知识3.1 专业基础课3.2 fpga相关专业知识 四、开发工具五、动手实验 一、前言 也不是心血来潮想学习fpga了&#xff0c;而是祥哥还有我一个国科大的同学都在往fpga这个方向走 并且看过我之前文章的同…

上位机图像处理和嵌入式模块部署(树莓派4b实现固件主流程)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 软件开发一般有软件需求、架构设计和详细设计、软件测试这四个部分。软件需求和软件测试都比较好理解&#xff0c;前者是说要实现哪些功能&#xf…

【Java】常见锁策略 CAS机制 锁优化策略

前言 在本文会详细介绍各种锁策略、CAS机制以及锁优化策略 不仅仅局限于Java&#xff0c;任何和锁相关的话题&#xff0c;都可能会涉及到下面的内容。 这些特性主要是给锁的实现者来参考的. 普通的程序猿也需要了解一些, 对于合理的使用锁也是有很大帮助的 文章目录 前言✍一、…

户外旅行摄影手册,旅游摄影完全攻略

一、资料前言 本套旅游摄影资料&#xff0c;大小295.47M&#xff0c;共有9个文件。 二、资料目录 《川藏线旅游摄影》杨桦.彩印版.pdf 《户外摄影指南》(Essential.Guide.to.Outdoor.photography.amateur)影印版.pdf 《旅行摄影大师班》(英)科尼什.扫描版.PDF 《旅行摄影…

vue快速入门(三十三)scoped解决组件样式冲突

注释很详细&#xff0c;直接上代码 上一篇 新增内容 scoped解决样式冲突的用法 源码 MyHeader.vue <!-- 用于测试全局注册组件 --> <template><div id"myHeader"><h1>又可以愉快的学习啦</h1></div> </template><scri…

C++初阶学习第一弹——C++入门(上)

前言&#xff1a; 很高兴&#xff0c;从今天开始&#xff0c;我们就要步入C的学习了&#xff0c;在这之前我们已经对C语言有了不错的了解&#xff0c;对数据结构也有了一些自己的认识&#xff0c;今天开始&#xff0c;我们就进入这个新的主题的学习——C 目录 一、C的发展即其特…

机房布线管理解决方案——预标记线缆+移动扫码终端

数据中心布线管理已经是运维管理人员最不愿触碰的问题&#xff0c;线缆连接关系杂乱&#xff0c;线标错乱设备间端口连接查找费时费力&#xff0c;下架业务线缆不能资源释放造成浪费&#xff0c;链路故障排查困难无从下手。 试一下nVisual数据中心布线运维管理解决方案采用物联…

Altair SimLab安装教程

写在前面&#xff1a; Altair simlab是一款简单的前处理软件&#xff0c;笔者在网上搜罗了以下&#xff0c;也下载了免费的资源&#xff0c;但是感觉网上的 教程和资源良莠不齐&#xff0c;借此机会&#xff0c;把自己的经验分享出来。 首先要下载以下的文件&#xff0c;文件有…

PostgreSQL中的索引类型有哪些,以及何时应选择不同类型的索引?

文章目录 索引 解决方案和示例代码 PostgreSQL提供了多种索引类型&#xff0c;每种类型都有其特定的应用场景和优势。选择合适的索引类型可以显著提高查询性能&#xff0c;减少数据库负载。 索引 以下是PostgreSQL中常见的索引类型及其适用场景&#xff1a; 1. B-tree 索引 …

NVIDIA智算中心“产品”上市,AI工业革命的iPhone时刻

GTC 2024落下帷幕了&#xff0c;但这个大会的信息仍在AI产业和经济中发酵。咨询机构WIKIBON认为&#xff0c;GTC 2024在整个科技史中的意义超过了当年史蒂夫乔布斯的iPod和iPhone发布。在AI将永久改变人类的共识下&#xff0c;GTC 2024在广度、愿景、生态系统等方面都有着深远影…

链表。。.

文章目录 单链表头结点合并01 21. 合并两个有序链表02 23. 合并 K 个升序链表 拆分01 86. 分隔链表 快慢指针链表倒数第k个结点链表是否成环链表的中间结点01 19. 删除链表的倒数第 N 个结点02 142. 环形链表 II03 876. 链表的中间结点 相交01 160. 相交链表 反转反转链表反转前…

每三人拥有一辆车!车载工业平板电脑五大硬性要求

在今年7月初&#xff0c;公安部发布2022年上半年全国机动车和驾驶人统计数据&#xff0c;数据显示&#xff0c;截至2022年6月底&#xff0c;全国机动车保有量达4.06亿辆&#xff0c;其中汽车3.10亿辆。此外&#xff0c;目前全国拥有驾驶证的人数高达4.92亿人&#xff0c;其中汽…

Windows安装ChatGLM3

Git clone GitHub - THUDM/ChatGLM3: ChatGLM3 series: Open Bilingual Chat LLMs | 开源双语对话语言模型 查看cuda版本 CUDA&#xff08;Compute Unified Device Architecture&#xff09;是NVIDIA公司开发的一个平行计算平台和编程模型&#xff0c;它允许开发者利用NVIDI…

antd3.x Tree组件遇到的坑

在使用antd 3.x低版本组件的过程中&#xff0c;使用Tree组件&#xff0c;加载树形数据时候&#xff0c;第一次始终无法加载数据&#xff0c;在查阅antd文档后发现Tree组件会缓存数据&#xff0c;需要进行判断数据是否已加载 {microFolderList.length ?<TreedefaultExpanded…

OpenHarmony图像解码库—stb-image [GN编译]

简介 stb_image主要是C/C实现的图像解码库。 下载安装 直接在OpenHarmony-SIG仓中搜索stb-image并下载。 使用说明 以OpenHarmony 3.1 Beta的rk3568版本为例 库代码存放路径&#xff1a;./third_party/stb-image 修改添加依赖的编译脚本&#xff0c;路径&#xff1a;/devel…

前端三剑客 HTML+CSS+JavaScript ① 基础入门

光永远会照亮你 —— 24.4.18 一、C/S架构和B/S架构 C:Client&#xff08;客户端&#xff09; B:Browser&#xff08;浏览器&#xff09; S:Server&#xff08;服务器&#xff09; C/S 架构&#xff1a; B/S 架构&#xff1a; 大型专业应用、安全性要求较高的应用&#xff0c;还…

Docker使用教程及docker部署Vue项目

什么是Docker及其工作原理 虚拟化技术Docker是什么&#xff1f;三大基本术语核心算法原理和具体操作步骤 Docker和传统虚拟化技术区别为什么使用Docker&#xff1f;Docker有什么作用&#xff1f;1.解决应用部署的环境问题遇到问题达到效果 2.容器化 docker的各种命令解释运行机…

nodejs版本过高导致vue-cli无法启动的解决方案

目录 前言异常现象解决方案总结 前言 之前使用软件管家升级了Nodejs&#xff0c;今天在运行Vue项目的时候老是报错&#xff0c;查了很多资料&#xff0c;最后确定是Nodejs版本过高导致的。 异常现象 E:\project\ry\RuoYi-Cloud\ruoyi-ui>npm run dev> ruoyi3.6.4 dev …

ubuntu上安装调试SVN服务

刚成立团队需要临时搭建一台SVN服务器&#xff0c;所以对照网上的一些提示做了下&#xff0c;操作起来不复杂&#xff0c;还是踩了不少坑&#xff0c;顺便原理性了解了下。 主要操作步骤如下&#xff1a; 1&#xff1a;安装svn sudo apt-get install subversion 2: 创建svn版…