UI调试--初步尝试心得总结

这段时间在做的一个项目，选定的UI框架是第三方的，即样式布局都已经固定，但是开发到中期总是觉得这个主题样式整体上两侧的留白有点多，于是考虑可否把这个留白变小一点，这也可以说是这篇文章写作的原因！

原始的页面布局如下

如果是小屏幕看着也许还行，但是换了大屏查看，发现就有点怪异了~~

那么该怎么处理呢？首先我搜索了引用的css文件，在相关的css文件中检索了很久，虽然样式类找到了，但是并没有发现类似两侧留白可能使用的margin、padding 等字样，所以这条路失败了~~

于是打开页面，直接F12（不要问我为什么）

通过上图，我们可以确定选中的div 的类名就是造成两侧留白的最直接的“外层”div了，而重点在下面

我们可以通过右侧的看到，在显示区（1140X836.500）的最外层就有一个padding，值是15；外层还有更多的间距，而通过对左侧Styles标签内容的查看，在第三个.container,.container-fluid中就有padding-left和padding-right，而且值恰巧也是15，这绝对不是巧合啊~~

通过这个动态图，大家是不是也发现了什么呢~~下面可以看到更有意思的地方！

有了这些发现，我们就知道是什么原因造成的页面两侧留白这么多了吧，但是具体怎么改，这个是需要尝试的。如下图

既然可以勾选是否使用样式，当然也是可以添加新样式的，如上添加了width:100%后，页面两侧缩小很多，而这个是我们需要的“合适距离”了~~

找到原因又找到可能的修改方向，剩下的就是自定义样式，根据需求把需要调整的控件样式重写一下就可以了

PS：本人后端做的更多，前端很多都是直接套用框架，这次的客户需求也算是一个不错的体验，写下来作为总结，如果能帮到需要的人，就更好了