我正在使用 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>
2 回答
四季花海
TA貢獻1811條經驗 獲得超5個贊
發生這種情況是因為引導程序使用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。
慕森王
TA貢獻1777條經驗 獲得超3個贊
<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>
- 2 回答
- 0 關注
- 126 瀏覽
添加回答
舉報
0/150
提交
取消