html - 基金会导航栏问题

标签 html css responsive-design zurb-foundation

我正在使用 Foundationtop-bar(导航)在调整窗口大小时在某些 787x676 分辨率下出现。我已经剪切/粘贴了代码,但问题仍然存在。然后我在 foundation 官方网站上也检查了该网站上的顶栏中断。我认为基础中存在一些错误。这是 link/截屏。有什么解决办法吗?

enter image description here

最佳答案

取决于你对固定的意思,当尺寸太小无法容纳所有内容时它会中断,因此可以添加 min-width 以确保它不会小于那个。

例子:

.top-bar {
    min-width: 800px;
}

或者您可以让它溢出,并且随着内容下降到下方而增加高度。为此,请先删除:

.top-bar {
    height: 47px !important;
}

这条线使黑条保持在原来的高度。

为了更快地切换到移动栏,寻找类似于 @media only screen and (max-width: 767px) 的位并将大小增加到刚好超过它中断的位置,例如 (最大宽度:780px)

关于html - 基金会导航栏问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21803106/

相关文章:

html - 我怎样才能通过将它们稍微向左移动来在右侧容纳更多链接而不只挤在一行中?

javascript - 为什么 Bootstrap 5 中的崩溃不能从示例中运行?

html - 尝试将 3 个 div block 彼此并排居中并留有间隙,它们在水平方向上彼此相邻对齐

html - 菜单栏将在 768px 后消失

html - 如何从 CMS 动态更改背景图像 SVG 的填充值

jquery - fancyBox - YouTube 视频不会显示

javascript - Uncaught ReferenceError : Vue is not defined at room. js:109

wordpress - div 中的背景颜色在 iphone 中不起作用

css - 为什么我的图像和背景图像在移动设备上如此模糊(使用 Bootstrap )

html - 删除 Chrome 中的黄色输入背景以实现透明输入