时间戳

首页 > 解决方案 > 断点未按预期工作

html - 断点未按预期工作

问题描述

我试图了解如何阻止断点将“联系人”菜单项向下敲到下一行。这是该页面的链接。

我想让汉堡包出现，而不是在页面小于 1065px 时将联系人菜单项敲到下一页。

使用更少并设置变量：

更少的变量：

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

标签： htmlcsslessbreakpoints

解决方案

@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;
    }
}

这意味着在任何大于 900 像素的窗口大小上，汉堡包将被隐藏，并且常规桌面菜单将可见 - 正如您所注意到的，当空间不足时将其呈现为两行。

更改您的 less 文件以使用该@desktop变量显示它将显示最大 1300 像素宽的屏幕的汉堡包。它应该可以解决问题。

推荐阅读