【问题标题】:Bootstrap: prevent navigation bar from collapseBootstrap:防止导航栏折叠
【发布时间】:2014-04-23 09:37:33
【问题描述】:

我正在使用 Bootstrap 构建一个非响应式网站。我有一个导航栏如下:

<ul class="nav navbar-nav">
   <li class="dropdown">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Something</a>
       <ul class="dropdown-menu">
           <li><a href="link">Item 1</a></li>
           <li><a href="link">Item 2</a></li>
       </ul>
   </li>
   <li class="dropdown">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Something Else</a>
       <ul class="dropdown-menu">
           <li><a href="link">Item 3</a></li>
           <li><a href="link">Item 4</a></li>
       </ul>
   </li>
</ul>

当浏览器宽度缩小时,导航栏会折叠以垂直显示菜单项。无论浏览器宽度如何变化,我都不希望导航栏有任何变化。我希望它是静态的。我怎样才能做到这一点?我知道这将是 CSS 技巧,但不知道如何开始。

更新

我放弃了将 Bootstrap 的导航栏用于非响应式网站的计划。这是来自 Bootstrap 本身http://getbootstrap.com/examples/non-responsive/

作为提示,导航栏组件在这里相当棘手,因为显示它的样式相当具体和详细。覆盖以确保桌面样式显示不像人们想要的那样高性能或时尚。请注意,在使用导航栏时,在此示例之上构建时可能存在潜在问题。

那里有很多简单的 CSS 菜单。

希望这对其他人有所帮助。

【问题讨论】:

    标签: twitter-bootstrap


    【解决方案1】:

    查看 Bootstrap 文档的相关区域(假设您使用的是 Bootstrap 3.0)here

    【讨论】:

    • 卡尔,感谢您的参与!您提供的链接说“如果使用导航栏,请删除所有导航栏折叠和展开行为”,它没有提供任何详细信息。这正是我要问的。问候。
    • @curious1,你是对的,第二次阅读文档非常模糊。除非通过 JS 显式调用,否则大多数 Bootstrap 响应式内容都是通过媒体查询和数据切换触发的。我想如果您要修改主要的 Bootstrap CSS 并将其全部修剪掉,以及删除所有数据切换和相关的折叠类,您可以删除他们所说的行为,但我同意根据您的要求它可能是更少的工作来简单地实现其他东西或编写自己的东西。祝你好运!
    • 卡尔,感谢您的跟进。与您交流愉快!
    • @curious1: 总是很乐意尽我所能提供帮助,也很高兴与您交流:)
    • 应该有一种方法可以禁用导航栏折叠,而不必将婴儿与水一起扔出去。
    猜你喜欢
    • 2017-05-25
    • 2015-12-07
    • 2017-06-06
    • 2020-07-25
    • 1970-01-01
    • 2018-03-22
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多