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>