Bootstrap 导航栏右侧位于左侧下方

【问题标题】：Bootstrap navbar right side falls under the leftBootstrap 导航栏右侧位于左侧下方
【发布时间】：2016-10-22 08:44:09
【问题描述】：

请看官方导航栏示例： https://getbootstrap.com/examples/navbar/

如果您尝试调整浏览器大小，您会看到：

今天我在我的网站上发现了同样的问题。

如何轻松解决此问题？

【问题讨论】：

  • 修复？你是什​​么意思修？该菜单是响应式的，这意味着它会根据浏览器宽度进行调整，以便整个菜单在全屏设备上可见。那个菜单在我看来一般都不错。
  • 所有菜单必须在一行显示，折叠模式除外
  • 一行？那是什么意思？移动模式下垂直列中的所有菜单项或桌面模式下水平行中的所有菜单项？
  • 桌面模式下所有菜单项在一个水平行中。在我的问题中，我对移动视图只字未提。仔细查看屏幕截图和示例。
  • 啊。我用手机看这个网站。该链接显示了一个移动菜单，所有条目都在一个列中。您确实意识到Default、Static Top 和Fixed Top 都是来自Dropdown 的子菜单选项，对吧？这就是为什么他们在一条单独的线上。提示：首先在手机上查看该链接，然后在桌面网站上查看。如果您没有手机，请使用 Chrome 开发者工具，然后选择开发工具栏左上角的手机图标@打开模拟器。测试六次（纵向/横向）x 3 个尺寸。使用这 3 个选项并在每个设备上滚动屏幕。

标签： twitter-bootstrap-3 navbar


【解决方案1】：

此菜单的一行空间不足。右侧部分不适合同一行。你可以：

  1. 减少菜单项的数量
    （例如，通过添加 hidden-sm 类来隐藏其中一个）
  2. 缩短项目名称
  3. 在名称中隐藏一个单词：
    <li><a href="#">Something else<span class="hidden-sm"> here</span></a></li>
  4. 减少菜单项之间的距离
  5. 针对此屏幕宽度减小徽标的宽度
  6. 扩展容器或改用container-fluid

【讨论】：

  • 我搜索了一些特殊的东西，它可以是 css 媒体查询来处理页面的这个问题部分。或者早点使用汉堡移动菜单。
  • @Sogl hidden-sm 类类似于@media (min-width: 768px) and (max-width: 991px) { .element { display: none; } }。你也可以change bootstrap navbar collapse breakpoint.
  • 非常感谢！这种方法解决了我的问题。我从菜单链接中隐藏了带有 hidden-sm 类的字体真棒图标。
猜你喜欢
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode