CSS媒体屏幕断点

Question

我正在使用Bootstrap 4，但是在bootstrap框架中已经有了媒体查询断点，现在我应该在哪里使用CSS断点选择器类？我在div类的行侧使用了一个选择器类，但它不起作用。下面是我的代码：

@media(max-width: 992px){
    .section-4 .section-breakpoint{
      flex-wrap: wrap!important;
      justify-content: center!important;
    }
    .section-4 .section-breakpoint > * {
      width: 100% !important;
    }
}

   <section class="section-4">
        <div class="container-fluid">
            <div class="row section-breakpoint">
                <article class="col-md-5 article first-article">
                    <hr class="hr-1">
                    <h2><i>More tools to help<br>
                        you do more</i></h2>
                    <h4><i>Analytics, social, and productivity</i></h4>
                    <hr class="hr-2">
                    <p>Easy-to-understand analytics ensure you're able to see at a glance exactly how well your website is performing with all Gator Website Builder accounts. Simple social media tools allow you to add live feeds from Instagram, Twitter, and Facebook in order to stay engaged. You can add G Suite productivity tools to your domain, enabling Gmail, Docs, Slides, and more.</p>
                    <h5><i><b>Get the best tools for $3.84/mo*</b></i></h5>
                    <a class="btn get-started-btn" href="#">BUY NOW</a>
                </article>
                <div class="col-md-7 text-right">
                    <img class="image-one" src="assets/images/product-7.png" alt="IMAGE-7">
                </div>
            </div>
        </div>
    </section>

Answer 1

这是因为引导程序使用了max-width

​

@media(max-width: 992px){
    .section-4 .section-breakpoint{
      flex-wrap: wrap!important;
      justify-content: center!important;
    }
    .section-4 .section-breakpoint > * {
      width: 100% !important;
      max-width: 100% !important; /* Add this*/
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

   <section class="section-4">
        <div class="container-fluid">
            <div class="row section-breakpoint">
                <article class="col-md-5 article first-article">
                    <hr class="hr-1">
                    <h2><i>More tools to help<br>
                        you do more</i></h2>
                    <h4><i>Analytics, social, and productivity</i></h4>
                    <hr class="hr-2">
                    <p>Easy-to-understand analytics ensure you're able to see at a glance exactly how well your website is performing with all Gator Website Builder accounts. Simple social media tools allow you to add live feeds from Instagram, Twitter, and Facebook in order to stay engaged. You can add G Suite productivity tools to your domain, enabling Gmail, Docs, Slides, and more.</p>
                    <h5><i><b>Get the best tools for $3.84/mo*</b></i></h5>
                    <a class="btn get-started-btn" href="#">BUY NOW</a>
                </article>
                <div class="col-md-7 text-right">
                    <img class="image-one" src="https://radiosol.cl/wp-content/uploads/2014/10/default-img-400x240.gif" alt="IMAGE-7">
                </div>
            </div>
        </div>
    </section>

​

您可以尝试使用bootstrap类在不覆盖css的情况下获得相同的结果。

Answer 2

​

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

   <section class="section-4">
        <div class="container-fluid">
            <div class="row section-breakpoint">
                <article class="col-md-12 col-lg-5 article first-article">
                    <hr class="hr-1">
                    <h2><i>More tools to help<br>
                        you do more</i></h2>
                    <h4><i>Analytics, social, and productivity</i></h4>
                    <hr class="hr-2">
                    <p>Easy-to-understand analytics ensure you're able to see at a glance exactly how well your website is performing with all Gator Website Builder accounts. Simple social media tools allow you to add live feeds from Instagram, Twitter, and Facebook in order to stay engaged. You can add G Suite productivity tools to your domain, enabling Gmail, Docs, Slides, and more.</p>
                    <h5><i><b>Get the best tools for $3.84/mo*</b></i></h5>
                    <a class="btn get-started-btn" href="#">BUY NOW</a>
                </article>
                <div class="col-md-12 col-lg-7 text-center">
                    <img class="image-one" src="https://radiosol.cl/wp-content/uploads/2014/10/default-img-400x240.gif" alt="IMAGE-7">
                </div>
            </div>
        </div>
    </section>

​