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写它。将其转换为Sass。

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

1 个答案: