在我的铁路项目中,我正在使用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-10
或col-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
将工作。