断点没有按预期工作
Breakpoints aren't working as expected
我正在尝试了解如何停止将 "contact" 菜单项向下敲到下一行的断点。这是 link to the page.
我想让汉堡包出现,而不是将联系人菜单项敲到下一页,这发生在页面小于 1065 像素时。
少用并设置变量:
少变量:
@mobile: 800px;
@tablet: 900px;
@desktop: 1300px;
@grid-columns: 12;
@grid-gutter-width: @space;
@grid-float-breakpoint: @mobile;
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
HTML导航
<nav class="container lg nav">
<div class="hamburger-wrap js-toggle-menu">
Menu
<div class="hamburger"></div>
</div>
<a href="/" class="logo fl">{{ site_name }}</a>
<span class="panel">
{{ nav from="/" include_home="false" include_entries="true" exclude_from_navigation:isnt="true" }}
{{ if has_entries }}
<span class="dropdown js-dropdown">
<span class="dropdown-trigger {{ if is_current or is_parent }}active{{ /if }}">{{ tag:nav_title or title }}</span>
<span class="dropdown-content">
<a href="{{ url }}">All</a>
{{ *recursive children* }}
</span>
</span>
{{ else }}
<a {{ if is_current or is_parent }} class="active"{{ /if }} href="{{ page_link or url_link or get:url }}" {{ if target }}target="_blank"{{ /if }}">
{{ tag:nav_title or title }}
</a>
{{ /if }}
{{ /nav }}
</span>
您的汉堡菜单设置为使用媒体查询最小值的 @tablet
分辨率可见。我通过检查你的页面得到了这个:
@media (max-width: 900px) {
.nav .hamburger-wrap {
display: block;
position: fixed;
top: 22px;
right: 30px;
bottom: auto;
left: auto;
z-index: 2;
padding-right: 25px;
line-height: 1;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
}
}
这意味着在任何 window 尺寸大于 900 像素的情况下,汉堡包将被隐藏,常规桌面菜单将可见 - 正如您所注意到的,当没有足够的空间时,将其呈现为两行。
使用 @desktop
变量更改您的 less 文件以显示它将会在最大 1300 像素宽的屏幕上显示汉堡包。它应该可以解决问题。
我正在尝试了解如何停止将 "contact" 菜单项向下敲到下一行的断点。这是 link to the page.
我想让汉堡包出现,而不是将联系人菜单项敲到下一页,这发生在页面小于 1065 像素时。
少用并设置变量:
少变量:
@mobile: 800px;
@tablet: 900px;
@desktop: 1300px;
@grid-columns: 12;
@grid-gutter-width: @space;
@grid-float-breakpoint: @mobile;
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
HTML导航
<nav class="container lg nav">
<div class="hamburger-wrap js-toggle-menu">
Menu
<div class="hamburger"></div>
</div>
<a href="/" class="logo fl">{{ site_name }}</a>
<span class="panel">
{{ nav from="/" include_home="false" include_entries="true" exclude_from_navigation:isnt="true" }}
{{ if has_entries }}
<span class="dropdown js-dropdown">
<span class="dropdown-trigger {{ if is_current or is_parent }}active{{ /if }}">{{ tag:nav_title or title }}</span>
<span class="dropdown-content">
<a href="{{ url }}">All</a>
{{ *recursive children* }}
</span>
</span>
{{ else }}
<a {{ if is_current or is_parent }} class="active"{{ /if }} href="{{ page_link or url_link or get:url }}" {{ if target }}target="_blank"{{ /if }}">
{{ tag:nav_title or title }}
</a>
{{ /if }}
{{ /nav }}
</span>
您的汉堡菜单设置为使用媒体查询最小值的 @tablet
分辨率可见。我通过检查你的页面得到了这个:
@media (max-width: 900px) {
.nav .hamburger-wrap {
display: block;
position: fixed;
top: 22px;
right: 30px;
bottom: auto;
left: auto;
z-index: 2;
padding-right: 25px;
line-height: 1;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
}
}
这意味着在任何 window 尺寸大于 900 像素的情况下,汉堡包将被隐藏,常规桌面菜单将可见 - 正如您所注意到的,当没有足够的空间时,将其呈现为两行。
使用 @desktop
变量更改您的 less 文件以显示它将会在最大 1300 像素宽的屏幕上显示汉堡包。它应该可以解决问题。