我使用的是 Themble 的 Bones 主题，它的样式中包含一个网格系统。我尝试在我的菜单项的标题中实现它，以便它们将缩小为移动大小的图标并在桌面屏幕上显示完整菜单。
问题是我无法让网格工作，所有的菜单项都 float 在彼此旁边，在所有屏幕尺寸上。 div 的“菜单栏”仅与图标一样大。
网格在其他区域起作用，例如侧边栏和内容区域。我对响应式列不是很熟悉，所以希望这里的一些专业人士能明白这一点。
此外，如你所知，我在本地使用 koala，Sass 的处理器。
标题
<body <?php body_class(); ?>>
<div id="container">
<header class="header" role="banner">
<div id="inner-header" class="wrap ">
<div id="logo" class="menubar m1of5 t1of5 d2of6 cf">
<a href="<?php echo home_url(); ?>"><img src="/home_icon.png">homepage</a>
</div>
<div id="menu-icon" class="menubar m1of5 t1of5 d1of6 cf">
<a href="#"><img src="/icon.png"/></a>
</div>
<div id="menu-icon" class="menubar m1of5 t1of5 d1of6 cf">
<a href="#"><img src="/icon.png"/></a>
</div>
<div id="menu-icon" class="menubar m1of5 t1of5 d1of6 cf">
<a href="#"><img src="/icon.png"/></a>
</div>
<div id="menu-icon" class="menubar m1of5 t1of5 d1of6 last-col cf">
<a href="#"><img src="/icon.png"/></a>
</div>
</div>
</header>
网格
@mixin grid-col {
float: left;
padding-right: 0.75em;
}
// the last column
.last-col {
float: right;
padding-right: 0 !important;
}
@media (max-width: 767px) {
.m-all {
@include grid-col;
width: 100%;
padding-right: 0;
}
.m-1of5 {
@include grid-col;
width: 20%;
}
}
And on and on for other sizes and screens.
风格
This is the mobile styling....
.header {
width:100%;
position: fixed;
background-color: $white;
border-bottom: 2px solid $border-color;
}
.menubar {
float: left;
}
#logo {
font-size: 0px;
a {
text-decoration: none;
}
}
#menu-icon {
background-color: $light;
border-radius: 4px;
}
最佳答案
<div id="logo" class="menubar m1of5 t1of5 d2of6 cf">
<a href="<?php echo home_url(); ?>"><img src="/home_icon.png">homepage</a>
</div>
你的类名应该用连字符连接:
<div id="logo" class="menubar m-1of5 t-1of5 d-2of6 cf">
<a href="<?php echo home_url(); ?>"><img src="/home_icon.png">homepage</a>
</div>
关于html - 网格在骨骼主题中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24688950/