twitter-bootstrap - 为什么类 offset-xs-* 不会在引导程序 4 中移动我的 div？

Question

我写了这个html：

  <h2>Column Offsetting</h2>
  <div style="max-width: 1200px; margin: 0 auto; padding: 10px;">
    <div class="container-fluid">
      <div class="row" style="margin-top: 20px;">
        <div class="col-12 offset-xs-2 col-md-4 thumb"></div>
        <div class="col-12 col-md-4 thumb"></div>
        <div class="col-12 col-md-4 thumb"></div>
      </div>
    </div>
  </div>

而且我不明白为什么第一个 div (with ) 不偏移。我已经替换offset-xs-2为offset-md-2，它适用于中等屏幕。

引导类 offset-* 是否仅适用于中等屏幕？

实际结果：

期望：

这是一个喜欢的代码框：链接

标签： twitter-bootstrapbootstrap-4

Answer 1

看看这段代码：

    <h2>Column Offsetting</h2>
    <div style="max-width: 1200px; margin: 0 auto; padding: 10px;">
        <div class="container-fluid">
            <div class="row" style="margin-top: 20px;">
                <div class="col-xs-12 offset-md-2 col-md-4 thumb"></div>
                <div class="col-xs-12 col-md-4 thumb"></div>
                <div class="col-xs-12 col-md-4 thumb"></div>
            </div>
        </div>
    </div>

实际上 xs 适用于小屏幕。用xs，缩小你的浏览器窗口，看看它的效果。中等适用于中等尺寸的屏幕。Bea 因为您没有在这里指定大号和特大号，中号也适用于它们。这样想，bootstrap 会在当前浏览器窗口中搜索最适合的样式。

在用监视器的尺寸看页的时候，按照特大>大>中>小>特小的顺序搜索样式。当我们在手机上观看页面时，它会按照特小>小>中>大>特大的顺序搜索样式。

要了解不同的尺寸，请查看：https ://getbootstrap.com/docs/4.5/layout/overview/

但基本上你可以这样想象：

• 超小 - 任何比手机屏幕更小的东西
• 小——手机屏幕
• 中小平板电脑屏幕
• 大 - 大平板电脑屏幕
• 超大 - 监视器屏幕