Twitter bootstrap 引导上的响应网格，保证金问题？

我有以下代码：

 <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6">
            <div class='priceBox'>
                <div class='header'>
                     <div class='headingColor free'></div>
                     <div class='heading'>FREE</div>
                     <div class='priceTag'></div>
                </div>

                <div class='buyNowBox free text-align'>
                    <button ng-show='!authService.getUser()'  class='btn btn-primary'>Sign up</button>
                </div>
                <div class='featureBox'>
                     <div class='heading'>FREE features:</div>
                     <ul>
                            <li>up to 10 questions</li>
                            <li>up to 10 participants</li>
                            <li>real time results</li>
                    </ul>
                </div>

            </div>

        </div>
        <div class="col-lg-3 col-md-3 col-sm-6">
            <div class='priceBox'>
                 <div class='header'>
                    <div class='headingColor basic'></div>
                     <div class='heading'> BASIC </div>
                     <div class='priceTag'>24$</div>
                </div>
                       <div class='buyNowBox basic  text-align'>
                              <button class='btn btn-primary'>Buy now</button>
                        </div>

                        <div class='featureBox'>
                             <div class='heading'>BASIC features:</div>

                            <ul>
                                <li>unlimited questions</li>
                                <li>up to 1000 participants</li>
                                <li>custom design</li>
                                <li>excel export</li>
                             </ul>
                        </div>
            </div>


        </div>
        <div class="col-lg-3 col-md-3 col-sm-6">
            <div class='priceBox'>
                 <div class='header'>
                    <div class='headingColor professional'></div>
                      <div class='heading '> PROFESSIONAL </div>
                      <div class='priceTag'>95$</div>
                </div>
                    <div class='buyNowBox professional  text-align'>
                          <button class='btn btn-primary '>Buy now</button>
                    </div>
                    <div class='featureBox'>
                         <div class='heading'>PROFESSIONAL features:</div>

                         <ul>
                                <li>BASIC features</li>
                                <li>10,000 participants</li>
                                <li>Complete brand control</li>
                        </ul>
                    </div>
            </div>


        </div>
        <div class="col-lg-3 col-md-3 col-sm-6">
            <div class='priceBox'>
                 <div class='header'>
                    <div class='headingColor enterprise'></div>
                    <div class='heading'>ENTERPRISE</div>
                    <div class='priceTag '>299$</div>
                </div>
                    <div class='buyNowBox enterprise  text-align'>
                          <button class='btn btn-primary'>Buy now</button>
                    </div>
                    <div class='featureBox'>
                        <div class='heading'>ENTERPRISE features:</div>
                         <ul>
                                <li>PROFESSIONAL features </li>
                                <li>unlimited participants</li>
                        </ul>
                    </div>
            </div>


        </div>
    </div>

我想要的是：

当屏幕很宽时，使它们彼此相邻，效果很好。。。 当屏幕小于750像素时，每行显示2个，现在可以了，但看起来像****，我怎样才能使它更好

当我说更好时，我的意思是：

从一行到另一行有一点空间（边距？） 其他任何建议都将不胜感激……

试试这个

@media only screen and (max-width: 768px) {
/* Style adjustments for viewports that meet the condition */
.priceBox{margin-bottom: 50px;}
}

---

我不擅长说笑。所以我不知道该怎么写。将此转换为Sass。

在需要边距的地方。当我的屏幕小到>750时，我有两个框向上，后面有两个框，并且两个框之间没有空格。。。

@media only screen and (max-width: 768px) {
/* Style adjustments for viewports that meet the condition */
.priceBox{margin-bottom: 50px;}
}