legend3---栅格系统偏移问题

legend3---栅格系统偏移问题

一、总结

一句话总结：

原因：因为激活类question_nav_active 多的两像素的边框使各个框的高度不一样了，所以造成元素偏移

解决方法：保持元素高度一样，或者放在不同的盒子里

二、栅格系统偏移问题

博客对应课程的视频位置：

1、现象

 

这是选中margin的效果，发现它们没对齐

 

2、原因

就是因为 凸出来了一点点

因为激活类question_nav_active 多的两像素的边框使各个框的高度不一样了，所以造成元素偏移

3、解决方法

保持高度一样即可

或者放在不同的盒子里

<ul class="question_circle_nav_list">
    <li data-my_part_id="1" data-has_data="1" class="my_part question_nav_active"><a class="question_nav_comment "><i class="fa fa-comments fa-fw" aria-hidden="true"></i></a><span>我的评论</span></li>
    <li data-my_part_id="2" data-has_data="0" class="my_part"><a class="question_nav_lesson "><i class="fa fa-building fa-fw" aria-hidden="true"></i></a><span>我的课程</span></li>
    <li data-my_part_id="3" data-has_data="0" class="my_part"><a class="question_nav_question_list "><i class="fa fa-cubes fa-fw" aria-hidden="true"></i></a><span>我的题库</span></li>
    <li data-my_part_id="4" data-has_data="0" class="my_part"><a class="question_nav_video "><i class="fa fa-video-camera fa-fw" aria-hidden="true"></i></a><span>我的视频</span></li>
</ul>
<ul class="question_circle_nav_list">
    @if(intval($user['part1_independent_question']))
        <li data-my_part_id="5" data-has_data="0" class="my_part"><a class="question_nav_video "><i class="fa fa-video-camera fa-fw" aria-hidden="true"></i></a><span>自主题库</span></li>
        <li data-my_part_id="5" data-has_data="0" class="my_part"><a class="question_nav_video "><i class="fa fa-video-camera fa-fw" aria-hidden="true"></i></a><span>我的收藏</span></li>
    @endif
</ul>

这里选择的方式是放在不同的盒子里面来解决