Question

我正在尝试使引导程序模板仅在移动设备上调整大小，并且在达到一定宽度后通常具有响应行为。例如，这意味着如果我在15英寸笔记本电脑上将浏览器的大小调整为仅将浏览器大小的一半，它只是向页面添加了水平滚动条。

我尝试使用container-sm和container-md，但是当我调整浏览器大小时，它仍然会缩小，我该如何更改此行为。我的模板就像：

    <div class="wrapper">
        <div class="container-fluid pl-4 pr-5 pt-4">
            <div class="row">
                <div class="col-sm-3">
                  <!-- content -->    
                </div>
                <div class="col-sm-6 order-2">
                  <!-- content -->
                </div>
                <div class="col-sm-3 order-sm-2 order-sm-2">
                  <!-- content -->
                <div id="#footerPlaceholder"></div>
                </div>       
            </div>
        </div>
    </div>

有什么方法可以将列设置为一定大小后重新缩小？

编辑：我希望仅在例如屏幕<600px

之后调整“ HTML”标签中的所有元素的大小

Answer 1

您应该在col-sm-3之前添加 col 来解决此问题。像这样：

编辑代码：如果我做对了，则应在断点设备（例如小屏幕）之前为所有其他设备添加“ col-4”（例如）大小。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        
<div class="wrapper">
    <div class="container-fluid pl-4 pr-5 pt-4">
        <div class="row bg-info">
            <div class="col col-4 col-sm-12 bg-info">
              Test  
            </div>
            <div class="col col-4 col-sm-12 order-2 bg-danger">
              Test
            </div>
            <div class="col col-4 col-sm-12 order-sm-2 order-sm-2 bg-success">
              Test
            <div id="#footerPlaceholder"></div>
            </div>       
        </div>
    </div>
</div>

仅在移动设备上引导响应行为

1 个答案: