Bootstrap 4和媒体查询遇到麻烦

时间：2019-03-08 08:03:23

标签： bootstrap-4 media-queries

这是我的网站部分代码。 

<div id="pricing" class="pricing container gap-double">
                    <!--Row-->
                 <div class="row">
                     <div class="col-sm-4">
                            <div class="block-member">
                                    <h6 class="mb-0 h6 light">sculpt your dream body</h6>
                                    <h3 class="italic">12 week  package</h3>
                                    <div class="block-price">
                                       <span class="dollar italic coloured">£</span>
                                       <span class="price colored bold">100</span>
                                       <span class="terms italic colored ">per month</span>
                                    </div>
                                    <h6 class="h6">become a member</h6>
                                    <a href="#" class="but round lg text-center">buy package now</a>
                     </div>
                     </div>
                     <div class="col-sm-4">
                            <div class="block-feature">
                                    <div class="block-body">
                                       <h4 class=" mb-0 text-center">meal plan</h4>
                                       <p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                                    </div>
                    </div>
                            <div class="block-feature">
                                    <div class="block-body">
                                       <h4 class=" mb-0">meal plan</h4>
                                       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                                    </div>
                    </div>
                            <div class="block-feature">
                                    <div class="block-body">
                                       <h4 class=" mb-0">meal plan</h4>
                                       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                                    </div>
                     </div>
             </div>
                     <div class="col-sm-4">
                                       <div class="block-feature">
                                               <div class="block-body">
                                                  <h4 class=" mb-0">meal plan</h4>
                                                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                                               </div>
                               </div>
                                       <div class="block-feature">
                                               <div class="block-body">
                                                  <h4 class=" mb-0">meal plan</h4>
                                                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                                               </div>
                               </div>
                                       <div class="block-feature">
                                               <div class="block-body">
                                                  <h4 class=" mb-0">meal plan</h4>
                                                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                                               </div>
                                </div>
                        </div>
                 </div>

                 </div>
                 <!--End container-->

此代码用于将我的网站分为三排报价。但是，当它是全屏时，它是完美的。 （请参见下图） enter image description here

但是在移动屏幕模式下，我似乎无法将积木移动到屏幕中央。 （请参见下图）

我在这里做错了什么？

CSS

/ *定价部分* / 

.block-price {
    margin-bottom: 2em;
    font-family: 'Roboto Condensed', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}
.block-price span.price {
    font-size: 140px;
    line-height: 140px;
}
.block-price span.dollar {
    font-size: 20px;
    position: relative;
    bottom: 4.2em;
    font-weight: 300;
    left: 0.5em;
}
.block-price span.terms {
    bottom: .5em;
    display: block;
    font-size: 18px;
    position: relative;
    font-weight: 300;
}
.block-feature,
.block-faq {
    margin-bottom: 3em;
    overflow: hidden;
}
.pricing .col-md-8 .col-sm-6:last-child .block-feature,
.pricing .col-md-8 .col-sm-6:nth-last-child(2n) .block-feature,
.faq .row:last-child .col-sm-5 .block-faq,
.faq .row .col-sm-5:nth-last-child(2n) .block-faq {
    margin-bottom: 0
}
.icon {
    font-size: 38px;
}
.block-feature .block-body {
    float: left;
    width: 50%;
    text-align: center;
}
.block-feature .block-body p,
.block-faq p {
    margin-bottom: 0;
}
/* End pricing section*/

enter image description here

1 个答案:

答案 0 :(得分：0)

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <title>Hello, world!</title>
  <style>
    .block-price {
      margin-bottom: 2em;
      font-family: 'Roboto Condensed', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    }
    
    .block-price span.price {
      font-size: 140px;
      line-height: 140px;
    }
    
    .block-price span.dollar {
      font-size: 20px;
      position: relative;
      bottom: 4.2em;
      font-weight: 300;
      left: 0.5em;
    }
    
    .block-price span.terms {
      bottom: .5em;
      display: block;
      font-size: 18px;
      position: relative;
      font-weight: 300;
    }
    
    .block-feature,
    .block-faq {
      margin-bottom: 3em;
      overflow: hidden;
    }
    
    .pricing .col-md-8 .col-sm-6:last-child .block-feature,
    .pricing .col-md-8 .col-sm-6:nth-last-child(2n) .block-feature,
    .faq .row:last-child .col-sm-5 .block-faq,
    .faq .row .col-sm-5:nth-last-child(2n) .block-faq {
      margin-bottom: 0
    }
    
    .icon {
      font-size: 38px;
    }
    
    .block-feature .block-body {
      float: left;
      width: 50%;
      text-align: center;
    }
    
    .block-feature .block-body p,
    .block-faq p {
      margin-bottom: 0;
    }
  </style>
</head>

<body>
  <div id="pricing" class="pricing container gap-double">
    <!--Row-->
    <div class="row text-center">
      <div class="col-sm-4">
        <div class="block-member">
          <h6 class="mb-0 h6 light">sculpt your dream body</h6>
          <h3 class="italic">12 week package</h3>
          <div class="block-price">
            <span class="dollar italic coloured">£</span>
            <span class="price colored bold">100</span>
            <span class="terms italic colored ">per month</span>
          </div>
          <h6 class="h6">become a member</h6>
          <a href="#" class="but round lg text-center">buy package now</a>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="block-feature">
          <div class="">
            <h4 class=" mb-0 text-center">meal plan</h4>
            <p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          </div>
        </div>
        <div class="block-feature">
          <div class="">
            <h4 class=" mb-0">meal plan</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          </div>
        </div>
        <div class="block-feature">
          <div class="">
            <h4 class=" mb-0">meal plan</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="block-feature">
          <div class="">
            <h4 class=" mb-0">meal plan</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          </div>
        </div>
        <div class="block-feature">
          <div class="">
            <h4 class=" mb-0">meal plan</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          </div>
        </div>
        <div class="block-feature">
          <div class="">
            <h4 class=" mb-0">meal plan</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          </div>
        </div>
      </div>
    </div>

  </div>
  <!--End container-->
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

添加text-center bootstrap类以使文本与div居中对齐，还需要删除或覆盖块体，因为它将div宽度设置为50％，从而导致文本在左侧对齐。

相关问题
最新问题