Twitter bootstrap 移动问题、修改引导类或错误的媒体查询

正如你马上就能看到的，我的媒体查询变得一团糟。我用项目符号创建这个时间线，发现自己写了太多的媒体查询，试图使项目符号与时间线对齐

我非常相信我在某处犯了一个错误。无论是在非媒体查询的css部分，还是在绝对位置区域，我都无法确定对齐方式。我的要求不是任何特定的屏幕尺寸，因此，我必须使其在所有屏幕上都达到最佳效果，我正在通过使浏览器宽度越来越小进行测试。是否有一个引导解决方案？我是否以错误的方式编写媒体查询

html{
字号：18px；
}
@介质（最小宽度：576px）{
.集装箱{
最大宽度：540像素；
}
}
@介质（最小宽度：768px）{
.集装箱{
最大宽度：720px；
}
}
@介质（最小宽度：992px）{
.集装箱{
最大宽度：960像素；
}
}
@介质（最小宽度：1200px）{
.集装箱{
最大宽度：1400px；
}
}
h1，.h1{
字体大小：3.815rem；
}
h2，.h2{
字号：2.441rem；
}
h3，.h3{
字体大小：1.563rem；
}
h4，.h4{
字体大小：1.25rem；
}
.项目方法{
填充：5rem0；
/*=============媒体查询==========*/
}
.project methodologyBullet:：之前{
内容：''；
宽度：25px；
高度：25px；
背景：#d4272e；
位置：绝对位置；
边界半径：30px；
左：26px；
顶部：0px；
不透明度：0；
}
.project方法包.methodologyBullet:：after{
内容：''；
宽度：12px；
高度：12px；
背景：#d4272e；
位置：绝对位置；
边界半径：30px；
左：33像素；
顶部：2个；
}
.project methodology wrap.project-methodology-list.active.methodologyBullet{
框大小：边框框；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
}
.project methodology wrap.project-methodology-list.active.methodologyBullet:：before{
不透明度：1；
过渡时间：0.5s；
左：26px；
}
.project methodology wrap.project-methodology-list.active.methodologyBullet:：after{
边框：5px实心#fff；
宽度：21px；
高度：21px；
左：28px；
}
.project methodology wrap.project methodology listCount、.project methodology wrap.methodologyBullet{
位置：绝对位置；
左：0；
}
.project methodology wrap.project methodology leftContent{
职位：-网络工具包粘性；
位置：粘性；
排名：0；
}
.项目方法总结.项目方法内容{
位置：相对位置；
溢出：隐藏；
}
.项目方法总结.项目方法权利内容：之前{
内容：“；
身高：100%；
宽度：8px；
位置：绝对位置；
背景色：#f1f2f6；
左：5.2%；
}
.project methodology wrap.project methodology rightContent.project methodology list{
位置：相对位置；
-webkit透视图：1000px；
透视图：1000px；
左侧填充：80px；
边缘底部：3rem；
}
.project methodology wrap.project methodology rightContent.project methodology list.project methodology listContent{
不透明度：0.2；
过渡时间：0.4s；
-webkit转换：无；
转化：无；
}
.project methodology wrap.project methodology rightContent.project-methodology-list.active.project methodology listContent{
不透明度：1；
}
@仅介质屏幕和（最小宽度：1201px）和（最大宽度：1280px）{
.项目方法总结.methodologyBullet{
左：0；
}
}
@仅介质屏幕和（最小宽度：1024px）和（最大宽度：1200px）{
.项目方法总结.methodologyBullet{
左-1.4%；
}
}
@仅介质屏幕和（最小宽度：800px）和（最大宽度：899px）{
.项目方法总结.methodologyBullet{
左：1.4%；
}
}
@仅介质屏幕和（最小宽度：768px）和（最大宽度：799px）{
.项目方法总结.methodologyBullet{
左-4.2%；
}
}
@仅介质屏幕和（最大宽度：736px）{
.项目方法总结.methodologyBullet{
左-0.2%；
}
}
@仅介质屏幕和（最大宽度：640像素）{
.项目方法总结.methodologyBullet{
左-0.2%；
}
}
@仅介质屏幕和（最大宽度：600px）{
.项目方法总结.methodologyBullet{
左-0.4%；
}
}
@仅介质屏幕和（最大宽度：570px）{
.项目方法总结.methodologyBullet{
左：0%；
}
}
@仅介质屏幕和（最大宽度：533px）{
.项目方法总结.methodologyBullet{
左-0.5%；
}
}
@仅介质屏幕和（最大宽度：480px）{
.项目方法总结.methodologyBullet{
左-1.3%；
}
}
@仅介质屏幕和（最大宽度：414px）{
.项目方法总结.methodologyBullet{
左-2.5%；
}
}
@仅介质屏幕和（最大宽度：384px）{
.项目方法总结.methodologyBullet{
左-3.4%；
}
}
@仅介质屏幕和（最大宽度：370px）{
.项目方法总结.methodologyBullet{
左-4.1%；
}
}
@仅介质屏幕和（最大宽度：320px）{
.项目方法总结.methodologyBullet{
左-5.4%；
}
}

文件
标题

我的同僚们都是精英。类似地，欧盟应该在短期内履行其义务，并在短期内履行其义务。

1.
标题

Lorem ipsum dolor sit，amet Concertetur Adipising Elite。