【问题标题】:Bootstrap Sidenav Styling on Desktop桌面上的 Bootstrap Sidenav 样式
【发布时间】:2019-08-11 13:37:22
【问题描述】:

我有一个引导导航栏,它有一个菜单,在点击移动设备和小视口时会从右侧滑出。在桌面上查看时,我希望应用导航栏的标准引导样式(没有菜单按钮,菜单项直接内联显示在导航栏中)。它似乎在小视口上按预期工作,但在桌面上它似乎仍然采用媒体查询的样式。我想我忽略了一些东西。那里的任何人都可以就我在这里做错了什么提出建议吗? 代码和示例可以在here 找到。

【问题讨论】:

    标签: jquery twitter-bootstrap bootstrap-4 navbar


    【解决方案1】:

    在媒体查询中,只需将 min-width 更改为 max-width:500px,之后它应该可以工作。

    【讨论】:

    • 感谢回复,如果我改成最大宽度,在桌面上看起来不错,但在移动端,菜单动画不再从右侧滑出,而只是表现得像标准的 Bootstrap 动画(从顶部下降)
    • 我认为这是因为小型设备的引导断点是 768 像素,因此请尝试将最大宽度改为 767 像素
    • 这绝对是正确的路径。我按照您的建议将最大宽度设置为 768,并获得了混合(更好)的结果。导航栏现在可以在台式机和移动设备上正确显示,但在平板电脑尺寸 (880 X 484) 中,它的行为仍然类似于标准下拉引导导航。
    • 好吧,只要找到带有查询的完美设置,这就是关键,良好的编码。
    猜你喜欢
    • 1970-01-01
    • 2018-09-25
    • 2013-11-18
    • 1970-01-01
    • 2014-05-16
    • 1970-01-01
    • 2014-09-20
    • 2013-05-08
    • 2021-04-20
    相关资源
    最近更新 更多