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

Question

我有这样的代码：

<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> 

我的CSS：（使用SASS）

.priceBox{ 
    width:90%; 
    //height:369px; 
    border:1px solid black; 
    .featureBox{ 
    height:225px; 
    .heading{ 
     text-decoration: underline; 
     text-align:center; 
     font-size:18px; 
    } 
    li{ 
     font-size:15px; 
    } 
    } 
    .buyNowBox{ 
    width:100%; 
    height:40px; 

    //background:green; 
    } 
    .buyNowBox .btn{ 
    margin:7px auto; 
    } 
    .buyNowBox.free{ 
     background:rgb(161, 235, 161);; 
    height:50px; 
    } 
    .buyNowBox.basic{ 
     background:rgb(126, 116, 201); 
    height:50px; 
    } 
    .buyNowBox.professional{ 
     background:rgb(146, 177, 80); 
    height:50px; 
    } 
    .buyNowBox.enterprise{ 
     background:rgb(155, 75, 116); 
    height:50px; 
    } 
    .header{ 
    width:100%; 
    height:100px; 
    //background:green; 
    .heading{ 
     text-align:center; 
     font-style:italic; 
     font-size:25px; 
    } 
    .priceTag{ 
     text-align:center; 
     font-size:20px; 
    } 
    } 
    .free{ 
    height:20px; 
    width:100%; 
    background:rgb(161, 235, 161); 
    } 
    .basic{ 
    height:20px; 
    width:100%; 
    background:rgb(126, 116, 201); 
    } 
    .professional{ 
    height:20px; 
    width:100%; 
    background:rgb(146, 177, 80); 
    } 
    .enterprise{ 
    height:20px; 
    width:100%; 
    background:rgb(155, 75, 116); 
    } 
} 

，我想的是以下几点：

当屏幕非常宽，使他们旁边对方，工作正常... 当屏幕小于750像素，每行显示2，现在工作，但看起来像****，我怎么能使它更好？

当我说好我的意思是：

有从一行到另一个一点空间（保证金？） 每隔建议将不胜感激...

Answer 1

试试这个

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

我不是萨斯的专家。所以我不知道如何为Sass写它。将其转换为Sass。