CSS 宽屏中的 div 宽度问题

Question

我正在使用购买的模板开发网站。 一切似乎都很完美。 但是，我对 html 代码的一部分有疑问，它在正常屏幕尺寸下工作正常，但在超宽屏幕尺寸下，div 尺寸减小为条带。 下面的图片证明了这一点：

这就是 div 在普通屏幕中的样子

当屏幕超宽时，例如在屏幕超过 15 英寸的设备中，div 看起来像这样：

然而，我的主要挑战是我真的不知道 css 文件中哪个属性正在控制它。 我尝试从 chrome 检查代码，最一致的属性是box-sizing属性，并且值设置为inherit 。 让我分享 div 的这一部分的 html 代码，以进一步清晰。

 <section class="gray pt-5 pb-0"> <div class="container"> <div class="row"> <div class="col text-center"> <div class="sec-heading mx-auto"> <h2>What People say About Us</h2> <p>Vukaplus has transformed many businesses and has moved many forward socially and financially.</p> </div> </div> </div> <div class="row m-0"> <div class="owl-carousel" id="testimonials"> <.-- Single Testimonials --> <div class="item"> <div class="testimonial-box"> <i class="fa fa-quote-left"></i> <p>Vukaplus helped us sell our house with minimal effort. Their team was efficient and always there to help.</p> <div class="client-thumb-box"> <div class="client-thumb-content"> <div class="client-thumb"> <img src="{% static 'base/assets/img/testimonials_property,jpeg' %}" class="img-responsive img-circle" alt=""> </div> <h5 class="mb-0">Brian Inchedi</h5> <span class="small-font">Real Estate Agent</span> </div> </div> </div> </div> <.-- Single Testimonials --> <div class="item"> <div class="testimonial-box"> <i class="fa fa-quote-left"></i> <p>Vukaplus has provided a platform to showcase our daycare business. After listing the business on the platform, we have never stopped receiving new clients.</p> <div class="client-thumb-box"> <div class="client-thumb-content"> <div class="client-thumb"> <img src="{% static 'base/assets/img/testimonials_business.jpeg' %}" class="img-responsive img-circle" alt=""> </div> <h5 class="mb-0">Irene Wambui</h5> <span class="small-font">Happy Baby Day Care</span> </div> </div> </div> </div> <.-- Single Testimonials --> <div class="item"> <div class="testimonial-box"> <i class="fa fa-quote-left"></i> <p>My car couldn't sell in a yard for 3 months. The day I listed it on Vukaplus. I received a customer instantly with a better offer than I wanted.</p> <div class="client-thumb-box"> <div class="client-thumb-content"> <div class="client-thumb"> <img src="{% static 'base/assets/img/testimonials_vehicle.jpeg' %}" class="img-responsive img-circle" alt=""> </div> <h5 class="mb-0">Teddy Kimani</h5> <span class="small-font">Car Sales Person</span> </div> </div> </div> </div> <!-- Single Testimonials --> <div class="item"> <div class="testimonial-box"> <i class="fa fa-quote-left"></i> <p>My client wanted a potential candidate for a vacancy he had in his company. A single post on Vukaplus gave me overwhelming applications and I got the right candidate.</p> <div class="client-thumb-box"> <div class="client-thumb-content"> <div class="client-thumb"> <img src="{% static 'base/assets/img/testimonials_recruitment.jpeg' %}" class="img-responsive img-circle" alt=""> </div> <h5 class="mb-0">Margaret Wada</h5> <span class="small-font">Recruiting Agent</span> </div> </div> </div> </div> </div> </div> </div> </section>

请建议，因为我在前端不是那么好。 css 文件太大，无法在此处共享代码，但我可以获得 html 部分使用的部分的片段。 谢谢你。

编辑：添加 CSS 代码片段

所以，我已将代码复制到 JSFiddle，这是链接： JSFiddle 上的代码片段

Answer 1

您可以尝试指定：

min-width: someValue

并且元素不会小于这个值；