Question

我使用了Themble中的Bones主题，其中包含一个网格系统的风格。我已尝试在菜单项的标题中实现它，以便它们可以缩小为移动大小的图标，并在桌面屏幕中显示完整菜单。

问题是我无法使网格工作，所有菜单项在所有屏幕尺寸上相互浮动。 divs＆＃39;菜单栏＆＃39;只有图标那么大。

网格正在处理其他区域，例如侧边栏和内容区域。我并不熟悉响应列，所以希望这对一些专业人士来说很明显。

另外，所以你知道，我在当地使用考拉（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;
  }

Answer 1

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

网格不在Bones主题中工作

1 个答案: