bootstrap中col-xs-*在屏幕缩小时没起作用

Question

代码:

<div class="container-fluid">
      <h1>Hello, world!</h1>

      <div class="row">
         <div class="col-xs-6 col-sm-3" style="background-color: red;">
            <p>lskdflsjdlfsjdlfsdljsdsdfsdfsdfsdfsf</p>
         </div>
         <div class="col-xs-6 col-sm-3" style="background-color: green;">
            <p>lskdflsjdlfsjdlfsdljsdsdfsdfsdfsdfsf</p>
         </div>
         <div class="col-xs-6 col-sm-3" style="background-color: blue;">
            <p>lsdflksjdfsldkfjlsdjflskjd</p>
         </div>
         <div class="col-xs-6 col-sm-3" style="background-color: yellow;">
            <p>lsdjflksjdfkmsldmflsdmlksdf</p>
         </div>
      </div>
      </div>

缩小时效果图：

Answer 1

是不是你缩小的程度还不够

xs的作用范围是小于768px，sm是768-992px，你这里没写md和lg，所以屏幕大于768的时候sm的配置生效，小于的时候xs生效

Answer 2

我知道了，我的bootstrap是4.0.0的，里面的Extra small不是col-xs-, 而是col-