时间戳

首页 > 解决方案 > Bootstrap - 屏幕调整大小的断点不会触发列调整大小

css - Bootstrap - 屏幕调整大小的断点不会触发列调整大小

问题描述

我有两个班级，md大小和sm大小。Smsize 应该触发列的垂直堆叠。

实际上，Bootstrap有xs它的默认断点，它应该触发相同的效果，但没有任何反应。

如果我想要vertical堆叠，我必须将其设置columns为 12，并且对于不同的屏幕尺寸没有其他类。

代码在这里：

https://hastebin.com/uyaboxatuk.js

标签： cssbootstrap-4resize

解决方案

引导断点指定应用列的最小屏幕大小。

例如，col-md类将仅应用于大于 768 像素的屏幕宽度。

在此处查看断点及其大小的完整表。

以您的代码为例：

<html>

<head>
  <style>
    .row {
      margin-bottom: 10px;
    }
    
    .a {
      background-color: red;
    }
    
    .b {
      background-color: blue;
    }
    
    .c {
      background-color: green;
    }
    
    .d {
      background-color: gray;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <div class="a row">
      <div class="b col-lg-2">large</div>
      <div class="c col-lg-4">large</div>
      <div class="d col-lg-6">large</div>
    </div>
    <div class="a row">
      <div class="b col-md-2">medium</div>
      <div class="c col-md-4">medium</div>
      <div class="d col-md-6">medium</div>
    </div>
    <div class="a row">
      <div class="b col-sm-2">small</div>
      <div class="c col-sm-4">small</div>
      <div class="d col-sm-6">small</div>
    </div>
  </div>
</body>

</html>

推荐阅读