Question

在我的Rails项目中，我使用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

除了这个问题，我的项目中没有其他Bootstrap问题，虽然我确信有一个简单的解决方案，但我一直无法弄清楚为什么会发生这种情况。

在Chrome开发工具中，我可以看到类col-10或col-sm-10在那里，但它不会切换到该媒体查询，因为它应该在视口较小时... -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将起作用。

Bootstrap 4 Alpha 6 Grid不响应移动断点（col-or col-sm）Rails

1 个答案: