Twitter Bootstrap - 导航栏内的下拉菜单但导航折叠外

2023-11-25

我想向导航栏添加一个下拉菜单,但请确保当浏览器调整为更窄的宽度时,下拉菜单在导航栏中保持可见,并且不包含在导航折叠中。

下面的 html 有效。然而,当页面大小调整时,下拉菜单会下降到下一行,并在导航栏中显示展开,从而留下一个非常深的导航栏。

我正在调用 bootstrap-collapse.js 和 bootstrap-dropdown.js。

有人有什么想法吗?

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Project</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
      <div class="container">
        <ul class="nav pull-right">
            <li class="divider-vertical"></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sharing<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Google+</a></li>
                </ul>
            </li>
        </ul>
      </div>
    </div>
  </div>
</div>

根据马克·奥托的说法,引导程序的开发人员之一:

导航栏中 .nav 内的所有下拉菜单都会受到影响。目前我们不提供阻止这种行为的方法。

但是,折叠的导航栏中可以有未折叠的下拉菜单。您可以通过以下三种方式之一来完成此操作:

  1. 将数据属性添加到下拉列表(data-no-collapse="true")来修复响应式选择器。
  2. 替换下拉菜单的类(class="dropdown-menu-no-collapse")从头开始重建其风格。
  3. 将另一个类添加到下拉列表中(class="dropdown-menu no-collapse) 覆盖响应式样式。

我写了一篇博文这解释了该怎么做。第一种方法需要编辑bootstrap-responsive.css,第二个需要改变bootstrap.css。对于第三种方法,您不必更改引导程序的任何 CSS,但它很难维护。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Twitter Bootstrap - 导航栏内的下拉菜单但导航折叠外 的相关文章

  • 使用 Twitter 的 Bootstrap 时,如何更改弹出窗口的内容?

    我正在使用 Twitter 的 Bootstrap js 的弹出窗口功能 我有一个按钮 当单击该按钮时 会执行以下 javascript popover anchor popover trigger manual placement bel
  • Morris.js 图表在引导选项卡内无法工作

    我遇到一种情况 我尝试在两个不同的内部使用 MorrisJS 图表引导选项卡 http getbootstrap com javascript tabs 图表在第一个 默认 选项卡中加载良好 但当我单击第二个选项卡时 图表根本无法正确加载
  • angular.js ng-repeat 用于创建网格

    我正在尝试使用 bootstrap 3 和 angularjs 创建一个网格 我试图创建的网格是这样的 使用 ng repeat 重复 div class row div class col md 4 item div div class
  • 在 Symfony 2 项目中安装 Bootstrap 主题

    我正在考虑安装这个主题 http bootswatch com superhero 在我的SF2项目中 我注意到页面顶部有4个文件可供下载 即 bootstrap min css 引导程序 css 无变量 bootswatch less 我
  • 在单引导模式上显示图像

    我正在执行一项任务 我需要很少的图像 并且我想在引导模式中显示图像 我已经完成了下面的代码 以便在单击链接时在模态上显示图像 其中链接具有以下图像 每个图像都有链接 模态与所有图像一起打开 但问题是我不想为每个图像创建模态
  • Bootstrap 字形未显示在表单中

    我正在尝试不同的方法来制作带有确认的表格 我有以下形式以及一个超链接 下面的超链接正确显示字形 但表单内的提交按钮仅在灰色按钮中显示为 提交 提交按钮和超链接的 CSS 是否需要不同 div class text center using
  • 我应该如何使用 Bootstrap 设计 Django 验证错误的样式?

    当 Django 中的表单出现验证错误时 错误会在包含类的列表中给出errorlist 可以通过设置使用 Bootstrap 为元素指定错误样式class alert alert error 结合这些并使用 Bootstrap 的错误样式来
  • 在 Bootstrap 模式窗口中打开远程内容

    我所需要的只是一个简单的示例 说明如何将远程内容打开到 Twitter Bootstrap 模式窗口中 我正在使用 Bootstrap v2 0 4 但我无法让它工作 我可以打开常规模式窗口 但无法让它打开其中的远程文件 首先 远程数据必须
  • 在调整窗口大小之前,ChartJS 不会在引导选项卡内绘制图表

    我正在使用 Bootstrap 的选项卡 每个选项卡内都带有 ChartJS 图表 但出现的一个问题是图表画布wont被绘制 直到我调整浏览器窗口的大小 最新的 Chrome 和 Firefox 都发生了这种情况 我一直在尝试不同的解决方案
  • 使用 Bootstrap 3 具有固定高度、标题和列宽度的表格

    我想要一张具有以下功能的表 固定标题 固定高度 带有可见的滚动条 3个固定宽度的列 一个大列和两个窄列 我开始使用 tbody display block overflow auto height 100px 为了至少获得固定高度 但此规则
  • 多列定义列表[重复]

    这个问题在这里已经有答案了 我有一个 dl 像这样 dl dt Quantity dd dt Size dd dt Rise dd dt Color dd dd dt dd dt dd dt dd dt dl 该列表是通过 php 动态生成
  • Twitter Bootstrap 中下拉链接的模态

    我正在尝试从下拉菜单中的链接进行模式启动 该模式似乎已启动 网站变为灰色 但看不到 来自不在下拉列表中的常规链接的模态工作得很好 我对 jquery 进行了愚弄 但由于我是 jquery 的新手 所以没有任何结果 这是我的网站代码
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 如何在编译引导程序时修复较少的错误?

    附件是编译时使用的跟踪grunt dist webmaker Anils MacBook Pro bootstrap anil grunt dist Running clean dist clean task Running less co
  • 当用户在引导日期选择器中更改月份时动态更新选项

    我在用着引导日期选择器 https github com uxsolutions bootstrap datepicker我也附加了一个监听器changeMonth https bootstrap datepicker readthedoc
  • 使用 highcharts 时,为什么 Bootstrap 选项卡显示宽度不正确的选项卡窗格 div?

    因此 我正在使用 Twitter 的 Bootstrap 创建一个包含选项卡式内容的页面 但我的起始活动 div 的内容始终与其他选项卡的内容不同 例如 我在不同的选项卡中使用 highcharts js 放入图表 但活动选项卡始终显示正确
  • jQuery:如何将 jQuery 日期选择器放入 Bootstrap Popover 中? [关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 我试图在引导弹出窗口中显示 jquery datepicker 并尝试了解决方案引导程序弹出窗口内的日期选择器 关闭 https
  • 更新 Bootstrap 缩略图网格 - ajax 请求

    设想 我有一个带有显示国家 地区的 Twitter Bootstrap 缩略图网格的视图 当用户单击一张图像时 它应该在同一网格 屏幕 中显示与该国家 地区相关的城市 技术的 首先 我用国家 地区填充 dataProvider 然后我应该将
  • Bootstrap中.row类的负左右边距

    只是出于好奇 为什么 bootstrap 使用 15px左和右margins 将取消15px左和右padding on container and container fluid类 为什么要设置内边距 然后在子项上使用负边距取消它 行上的负
  • Twitter Bootstrap 上的插入符号是如何构建的?

    这更多的是一个好奇问题 而不是我真正需要知道的事情 在本页面 http twitter github com bootstrap components html buttonDropdowns http twitter github com

随机推荐

  • React 和 Docker - 未捕获错误:找不到模块“react-player”

    在我的反应组件的顶部 咖啡 jsx 我有这个进口 import ReactPlayer from react player 软件包 react player 已安装 位于package json and node modules 我的代码运
  • 无法使用 Mongodb 协议在 Azure DocumentDb 中创建索引

    现在我知道DocumentDb不支持唯一索引 但是为什么我不能使用createIndex 创建普通索引 在蒙戈外壳中 gt db product createIndex itemId 1 t OKMongoResponse ok 1 但集合
  • 从基类方法返回派生类型

    我有一个与此类似的类层次结构 public class Base private List
  • UWP - 通过套接字将网络摄像头流式传输到 MediaElement - 图片损坏?

    背景 我编写的代码记录来自网络摄像头的视频剪辑 将它们写入内存流 然后通过套接字连接传输数据 在该连接中数据被重新组合成视频并在媒体元素上播放 最终目标是创建一个婴儿监视器系统 服务器 摄像头在 Windows IOT Raspberry
  • 我可以使用 python 默认库集加密电子邮件并将其解密吗?

    当然 类似的问题已经在 stackoverflow 中提出 但我不想使用任何第三方库 例如 Crypto 或其他库 因此 我需要从用户电子邮件生成密文并将其解密回明文 我怎样才能在Python中做到这一点 第三方系统是您最好的选择 如果您真
  • 在 C++ 中渲染矢量图形 (.svg)

    我和一个朋友正在开发一款 2D 游戏 其中图形将是 svg 文件 我们将通过首先光栅化它们或直接将它们渲染在表面上 在某些时候仍然需要光栅化 来适当缩放它们 问题是 我一整天都在寻找一个库 它允许我获取 svg 文件并最终让它在 alleg
  • 在 VBScript 中创建多选列表框 [关闭]

    Closed 这个问题需要多问focused 目前不接受答案 我想创建一个 VBScript 不在 HTML 文件内 为用户提供可供选择的文档列表 然后使用这些选择为他们选择的每个文档运行另一个脚本 如何创建这个列表框 WSH VBS 的某
  • udf 与直接 sql 性能比较

    使用MSSQL 2005 我今天在 where 语句中使用标量 UDF 来查看与进行调用和 io 差异等相关的一些成本 我从两张基本表格开始 拥有 100 万行的客户 和购买有 100 000 两者都有一个自动标识列作为主键 没有定义其他索
  • 使用 xdotool 自动网页刷新 - 窗口焦点后不发送密钥

    Given 我有 Firefox 火狐页面标题 在我的 Ubuntu 计算机上打开页面 这是我的命令 xdotool search Firefox Page Title windowactivate sync key clearmodifi
  • getaddrinfo EAI_AGAINregistry.npmjs.org:80

    大家好 我正在尝试在 npm 中发布我的角度库 但是当我登录时 我得到了这个 npm ERR code EAI AGAIN npm ERR errno EAI AGAIN npm ERR request to http registry n
  • AWS Lambda 无法调用 Cognito Identity - IAM 角色

    我有一些 javascript 可以在我的本地计算机上运行 但不能在 Lambda 中运行 调用时超时cognitoidentity getOpenIdTokenForDeveloperIdentity errorMessage 2016
  • 我可以在自定义中间件中添加新的范围服务吗?

    我在 Asp Net Core 中使用 WebApi 我想知道是否 如何添加一个新的范围服务 所有以下中间件和控制器都可以通过依赖注入访问该服务 或者我应该与 HttpContext Items 共享状态 这似乎不是它的目的 因为 Http
  • 将字符串转换为浮点数据类型

    我需要将文本框 即货币 的内容转换为浮点数数据类型 我会转为单身吗 txtPurchItemCorrectPrice Text Trim 如果您正在处理货币 那么我会使用double至少 如果没有的话decimal 这就是说你想要 doub
  • Mapcat打破懒惰

    我有一个生成惰性序列的函数 称为 a function 如果我运行代码 map a function a sequence of values 它按预期返回一个惰性序列 但是当我运行代码时 mapcat a function a seque
  • 如何将 mat 转换为图像

    我需要将 Emgu CV 中的 Mat 转换为图像 尝试将 Mat 转换为图像会产生异常 Cannot implicitly convert type Emgu CV Mat to Emgu CV Image Image
  • 如何计算 Git 中两次提交之间更改的行数?

    有没有简单的方法来计算 Git 中两次提交之间更改的行数 我知道我可以做一个git diff 并计算行数 但这似乎很乏味 我还想知道如何做到这一点 仅包括我自己的提交行数 你想要的 stat的选项git diff 或者如果您想在脚本中解析它
  • 是否存在用于多个读取或写入线程的无锁队列之类的东西?

    我在想 是否有可能有一个lockless排队时超过一个线程是读还是写 我见过一种无锁队列的实现 该队列使用一个读取线程和一个写入线程 但任一线程都不会超过一个 是否可以 我不认为是这样 可以 有人想证明吗 有多种算法可用 我最终实现了无锁
  • 如何访问Android中的下载文件夹?

    我是新的android 我正在制作一个应用程序 可以在其中将文件下载到下载文件夹 使用下载管理器 如果我转到模拟器中的下载文件夹 我可以看到图片 那么 如果我想显示下载文件的幻灯片 如何才能访问该文件夹 其次如何向此代码添加进度条 impo
  • 如何自动验证 Windows 集成而不弹出登录窗口?

    我用default aspx 编写了一个asp net 应用程序 当我点击此页面时 它询问我 Windows 登录弹出窗口 我的应用程序应该需要 Windows 身份验证 但它应该 集成 Windows 身份验证 如果我输入登录密码 我就可
  • Twitter Bootstrap - 导航栏内的下拉菜单但导航折叠外

    我想向导航栏添加一个下拉菜单 但请确保当浏览器调整为更窄的宽度时 下拉菜单在导航栏中保持可见 并且不包含在导航折叠中 下面的 html 有效 然而 当页面大小调整时 下拉菜单会下降到下一行 并在导航栏中显示展开 从而留下一个非常深的导航栏