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，这是链接： Code snippets on JSFiddle

Answer 1

您可以尝试指定：

min-width: someValue

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

宽屏幕中的 CSS div 宽度问题

1 个答案: