首页 > 解决方案 > 当我使用 col-* 并占据全宽时,引导程序没有响应,尽管它在大屏幕上工作?

问题描述

我像往常一样链接了 Bootstrap 3,但是当我测试页面 col-md 不能在中等屏幕上工作并且它在大屏幕上工作时。问题出在哪里?并且它在页面中的所有 col-md 中重复,我也注意到如果容器的全宽需要它

<div class="container">
            <div class="row wow animated fadeInUp" data-wow-duration="1s" data-wow-delay="1s">
                <div class="col-md-4">
                    <div class="services-item">
                        <div class="services-item-icon">
                            <i class="fa fa-paint-brush fa-3x"></i>
                        </div>
                        <div class="services-item-title">
                            <h3>Web Design</h3>
                        </div>
                        <div class="services-item-text">
                            <p>Lorem ipsum dolor sit amet, consectetur<br> adipisicing elit.</p>
                        </div>
                    </div>
                </div>

标签: csstwitter-bootstrap

解决方案


In order to make it work I believe you are looking for the following. Giving it full width on xs devices and half width on sm devices and 1/3 width on med and up. Please read documentation of bootstrap grid system here. https://getbootstrap.com/docs/4.2/layout/grid/

<div class="col-xs-12 col-sm-6 col-md-4">
    <div class="services-item">
         <div class="services-item-icon">
              <i class="fa fa-paint-brush fa-3x"></i>
         </div>
         ....
    </div>
</div>

推荐阅读