Bootstrap 4 Alpha 6网格未响应移动断点(Col-和Col-SM)导轨



在我的铁路项目中,我正在使用gem 'bootstrap', '4.0.0.alpha6'

在使用标记中使用多个断点时,我无法让网格系统自动切换到col- or col-sm尺寸。

示例:

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

使用上面的标记,网格系统似乎被卡在col-md尺寸上。但是,当我用小提琴复制代码时,所有的网格大小似乎都可以正常工作。

然而示例:

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

除了这个项目外,我在项目中没有其他问题,尽管我确定有一个简单的解决方案,但我一直无法弄清楚为什么会发生这种情况。


在Chrome Dev工具中,我可以看到类col-10col-sm-10都在那里,但是当视口大小较小时,它只是不会像该媒体查询那样切换到该媒体查询。.Col-MD Breakpoint持续存在。

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;
}

升级到Bootstrap 4.0.0-在此版本中,col-10将工作。

最新更新