css - Bootstrap 4 Alpha 6 Grid 不响应移动断点(col- 或 col-sm)Rails

Question

在我的 Rails 元素中，我正在使用 gem 'bootstrap', '4.0.0.alpha6'。

在我的标记中使用多个断点时，我无法让网格系统自动切换到 col- 或 col-sm 大小调整。

示例:

<div class="col-10 col-md-8 col-lg-5"></div> #stays col-md-8 even on mobile

使用上面的标记，网格系统似乎卡在 col-md 大小调整上。但是，当我在 fiddle 中复制代码时，所有网格大小似乎都可以正常工作。

但是，当仅使用一个类时，移动网格类确实适用于我的元素。

示例:

<div class="col-10"></div> #col-10 works when this is the only grid class in markup 

除了这个问题，我的元素中没有其他关于 Bootstrap 的问题，虽然我确信有一个简单的解决方案，但我一直无法弄清楚为什么会这样。

在 Chrome 开发工具中，我可以看到类 col-10 或 col-sm-10 在那里，但它只是没有切换到那个媒体查询，因为它当视口(viewport)尺寸较小时应该..col-md 断点仍然存在。

HTML

<div id="overlay"></div>
<div class="container-fluid bg-img">
  <div class="row">
    <div class="hero col-10 col-md-8 col-lg-5">
      <div class="inner-hero">
        <div class="col-12 hero-text text-top">Text</div>
          <div class="col-12 hero-icons">
            <i class="hero-icon"><%= image_tag('beet.png') %></i>
            <i class="hero-icon"><%= image_tag('forks.png') %></i>
            <i class="hero-icon"><%= image_tag('wheat.png') %></i>
          </div>
        <div class="col-12 hero-text text-btm">Text</div>
      </div>
    </div>
  </div>
</div>

SCSS

.overlay {
  position: fixed;
  width: 70%;
  height: 100vh;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: seashell;
  z-index: 2;
  cursor: pointer;
}

.bg-img {
  background: url('bgimg4.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vh;
}

.opaque {
  opacity: 0.7;
}

.hero {
  background: white;
  margin: 30vh auto 0;
  padding: 15px;
  box-shadow: 6px 7px 4px -3px rgba(0,0,0,0.6);
}

.inner-hero {
  border: 1px solid black;
  height: 100%;
}

.hero-text {
  display: inline-flex;
  justify-content: center;
  font-family: 'Coyote';
  font-size: 2rem;
  color: black;
}

.text-top {
  padding: 40px 10px 0px;
  letter-spacing: 13px;
}

.text-btm {
  padding: 0px 10px 40px;
  letter-spacing: 8px;
}

.hero-icons {
  display: inline-flex;
  justify-content: center;
}

Answer 1

升级到 Bootstrap 4.0.0——在此版本中，col-10 将起作用。