0

我正在尝试更改 Bootstrap 4.1 中 sm 分辨率/设备上的列顺序，但不幸的是没有发生任何事情。我正在为 Bootstrap 4.1 使用订单前缀。我的 html 代码如下所示。有人可以帮忙吗？

<div class="container-fluid office-spaces">
  <div class="col-md-12 col-xs-12 first-layout">
       <div class="col-md-6 order-2 order-md-1">
            <div class="office-spaces-slider"> 
                 <div class="img-wrapper">
                     <img class="img-responsive" src="theme/images/interior2.jpg" alt="interior2">
                    </div>
                </div>
            </div>
            <div class="col-md-4 order-1 order-md-2">
                <div class="col-md-6 col-xs-12">
                    <hr>
                    <h3>OFFICE SPACES</h3>
                </div>
                <div class="col-md-6 col-xs-12">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis nibh
                        nibh, quis vehicula neque suscipit at. Sed dictum, sapien ut sagittis posuere,
                        massa metus vulputate lorem, ac egestas erat ante et lorem. Aenean facilisis
                        tincidunt lectus, tristique egestas erat fermentum nec. Vivamus vestibulum
                        metus et dui posuere convallis. 
                    </p>
                </div>
            </div>
            <div class="col-md-2 empty order-3 order-sm-3"></div>
        </div>
    </div>
4

1 回答 1

-1

在 bootstrap 4 中，列格式如下：

  • col-*--> 手机人像模式

  • col-sm-*--> 移动横屏模式

  • col-md-*--> ipad 人像模式

  • col-lg-*--> ipad横向模式

  • col-xl-*--> 笔记本模式，桌面模式

因此，您应该使用以下格式在所有设备中做出响应：

<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
</div>

并且总是把.row类放在.container类行之后：

<div class="row">
 //ur column classes goes here
</div>
于 2019-09-13T08:01:10.603 回答