用的是boostrap的栅格系统，但是效果和设计图有出入，请问有什么解决方案

Question

设计图效果

实际效果

Answer 1

bootstrap只是提供了一个大方向，实际需求不符合是很正常的。bootstrap也支持用户自己进行相应的修改，如果你对bootstrap的目录结构和文件不熟悉，建议不要直接修改文件，而且那样也不利于扩展，因为如果重新获取bootstrap就没有你手动做的修改了，建议添加带 !important的class属性，在需要的地方覆盖bootstrap的样式即可

Answer 2

1、改.container宽度，改.col-**间距之类
2、悄悄修改设计图

Answer 3

没怎么看出差距啊

Answer 4

Bootstrap设置了 col之间 15px的间距，你手动去掉就知道了。

Answer 5

假设设计稿中间内容的宽度是1000px,每一个小模块中间的间距是20px

@media(min-width:1000px){
    .container 
    {
        width:1000px;
    }
    .row 
    {
        margin-left:-10px;
        margin-right:-10px;
    }
    
    .col-lg-4 
    {
        padding-left:10px;
        padding-right:10px;
    }
}

html的结构应该是

    <div class="container">
        <div class="top"><button class="btn btn-primary">免费公开课</button></div>
        <div class="row">
            <div class="col-sm-6 col-md-4 col-lg-4">
                小模块
            </div>
        </div>
    </div>

Answer 6

bootstrap 是针对要求不高的项目来使用的。如果要求高，使用它完全就是折腾自己。

Answer 7

针对每个item，重写左右边距。或者每三列套在一个row标签中