twitter bootstrap 下拉菜单的对齐

2024-04-21

我设计了一个带有下拉菜单的引导导航栏

http://jsfiddle.net/yabasha/fex8N/3/ http://jsfiddle.net/yabasha/fex8N/3/

<nav class="navbar navbar-inverse">
<div class="navbar-inner">
    <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
        </li>
    </ul>
</div>
ul.nav li.dropdown:hover > ul.dropdown-menu{
display: block;    
}

有没有办法更改下拉菜单的默认对齐方式(从左到中/右),以便箭头显示在中/右?


最好避免使用px用于定位,因为下拉菜单的宽度可能会改变。这对于使插入符号居中更合适:

.navbar .nav > li > .dropdown-menu.pull-center:after {
  left: 50%;
  margin-left: -6px;
}
.navbar .nav > li > .dropdown-menu.pull-center:before {
  left: 50%;
  margin-left: -7px;
}

为了右对齐,你只需要添加类pull-right到下拉菜单:

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu pull-right">
    <!-- your menu -->
  </ul>
</li>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

twitter bootstrap 下拉菜单的对齐 的相关文章

  • 如何在 CSS 中降低图像亮度

    我想降低 CSS 中的图像亮度 我搜索了很多 但我所得到的只是如何改变不透明度 但这使图像更加明亮 谁能帮我 您正在寻找的功能是filter 它能够实现一系列图像效果 包括亮度 myimage filter brightness 50 您可
  • FF 和 Webkit 中边框折叠的差异

    我有一个包含以下规则的表 table cellspacing 0 cellpadding 0 style width 100 并且单元格具有以下 CSS td padding 4px height 22px border 1px solid
  • CSS变量名可以以数字开头吗?

    我想知道定义一个以这样的数字开头的 css 变量是否有效 root 1space 32px 这在 Chrome 上工作得很好 但是该代码没有经过验证https jigsaw w3 org css validator https jigsaw
  • Bootstrap shown.bs.tab 事件不起作用

    我正在使用灵活的模板 http the8guild com themes html flexy v1 7 stylesPage html 使用引导程序 并且我无法让选项卡上的 shown bs tab 事件正常工作 我已经成功让它发挥作用J
  • CSS3输入元素的圆角,没有js/图像

    谁可以为输入元素制作圆角 我需要一种不使用 javascript 和图像的方法 Added
  • AngularJS:ng-show 与 display:none

    我有一个用例 我必须使用 CSS 默认隐藏 HTML 元素 如下所示 HTML div class item div CSS item display none 但是 我需要在页面加载后使用 ng show 切换元素的可见性 如下所示 di
  • 放大 div 内的图像而不移动 div

    如何使图像在此 div 比例内 而不在悬停时进行实际的 div 缩放 所以我只想放大图像 这是代码 div img src some image div Use transform scale container display inlin
  • CSS - 为什么我无法设置 元素的高度和宽度?

    我正在尝试使用以下 html 标记创建 css 按钮 a href access php class css button red Forgot password a 但它最终不会比中间的文本大 即使我已经设置了班级的高度和宽度 顺便说一句
  • CSS 转换在toggleClass() 之后不起作用

    我创建了一个切换菜单 如图所示这个演示 http jsfiddle net 85Ryan Hrsdw 1 我添加了一个CSS过渡效果div nav menu 我用过max height 0 to max height 480px 当我单击菜
  • 输入数字最大属性调整字段大小

    当在 Chrome 中向输入数字字段添加最大值时 它将根据最大值的宽度重新调整字段的大小 看来我无法控制调整大小的行为
  • Angular4 - 滚动到锚点

    我正在尝试对同一页面上的锚元素进行简单的滚动 基本上 用户点击 尝试 按钮 它就会滚动到页面下方 ID 为 登录 的区域 现在 它正在与一个基本的id login a href login a 但它正在跳转到该部分 理想情况下 我希望它滚动
  • 如何使用 Bourbon Neat Framework 实现移动优先

    我一直在使用 bourbon clean 来进行桌面优先布局 效果很好 不过 我想做一个移动优先版本 从移动开始 然后逐步向上 默认网格为 12 列 对于移动设备 我通常使用 4 列网格 我尝试将网格更改为 4 列 然后扩展到 12 列 但
  • 我的整个 Rails 应用程序仅从一个文件获取 css 为什么

    我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css 我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从p
  • 使网格项跨越到隐式网格中的最后一行/列

    当我不知道行数时 是否可以使网格项跨度从第一行到最后一行 假设我有以下 HTML 内容 其中包含未知数量的框 我怎样才能做到第三个 box从第一条网格线到最后一条网格线 container display grid grid templat
  • 允许点击 twitter bootstrap 下拉切换链接吗?

    我们已经设置了 Twitter 引导下拉菜单以在悬停时工作 而不是单击 是的 我们知道触摸设备上没有悬停 但我们希望当我们单击主链接时能够使其正常工作 默认情况下 twitter bootstrap 会阻止它 那么我们如何重新启用它呢 只需
  • 如何翻转 Twitter Bootstrap 的工具提示

    我正在使用 Twitter 的 Bootstrap 来实现工具提示 目前 工具提示显示在链接上方 我希望工具提示出现在链接下方 我该怎么做呢 我正在触发工具提示 它明确指出 底部 但它不想为我工作 tooltip tooltip place
  • 如何在 HTML 表格上使用分页?

    我正在尝试使用这个分页library http flaviusmatis github io simplePagination js 在我的 HTML 表格页面 特别是浅色主题 中 但不知何故 我无法理解如何在我的 HTML 页面中以这种方
  • 如何在不设置动画的情况下突然更改 CSS 动画中的属性

    这是我试图弄清楚的 但没有使用 51 关键帧作为实现更改的黑客方法transform origin 这里有一个小提琴演示 http jsfiddle net p7pswnpq keyframes spin 0 transform origi
  • 中心引导表宽度为 100%?

    table class table table striped table hover table responsive table
  • 优化 CSS 交付 - Google 的建议

    谷歌建议在 head 中使用非常重要的 CSS 内联 并在内部使用其他 CSS

随机推荐

  • 边框颜色的CSS复选框样式[重复]

    这个问题在这里已经有答案了 我的表格中有一个复选框 这是该复选框的 CSS input type checkbox width 20px height 30px margin auto display table row border 5p
  • Bootstrap 按钮活动颜色变化

    我正在使用引导按钮类 更具体地说 如下
  • 如何从WebBrowser控件获取图像

    我有一个 WebBrowser 控件 在浏览页面后我需要下载图像 我使用了以下代码 HtmlElementCollection tagsColl webBrowser1 Document GetElementsByTagName img f
  • SQL插入相关表

    在我看来 这似乎是 SQL 数据库开发中经常出现的问题 但我对这一切都是新手 所以请原谅我的无知 我有 2 张桌子 CREATE TABLE dbo Tracks TrackStringId bigint NOT NULL Id bigin
  • 如何从 Node.js 调用 C++ 代码?

    我目前正在开发一个在服务器上运行的模拟器 并应在浏览器中显示数据 对于服务文件 通信和类似的事情 我想使用 Node js 但是 我不确定它在计算部门是否会像我希望的那样执行 所以我想用 C 开发模拟部分 模拟被划分为单独的 世界 它们都以
  • 使用 node-sass 安装 angular-cli 时出错

    我的系统配置 Debian 4 4 nvm 0 33 8 节点 v8 9 4 npm 5 6 0 我想安装 Angular clinpm install g angular cli 但我收到一条错误消息 root contracts hom
  • NugGet Semver - 允许哪些预发行角色?

    我正在尝试对我的 NuGet 包 NET Core 2 之一使用语义版本控制 版本如下 1 0 0 my fancy branch 123 正如您所猜测的 我尝试将分支名称和当前 BuildId 设置为预发布标签 不幸的是 dotnet b
  • MediaCodec.createInputSurface() 在 Android 模拟器中抛出 IllegalStateException(错误 -38)

    I have MediaMuxer MediaMuxer mMediaMuxer new MediaMuxer new File Environment getExternalStorageDirectory video mp4 getPa
  • 在 Shiny 中格式化响应式 data.frames

    我有一个工作闪亮的应用程序 但我正在更改它 以便输入数据是反应性的 当底层数据更新时它会更新 当它刚刚读入数据时 它工作得很好 但现在数据是反应性的 我在其中一个文件上遇到了问题 另外两个文件按预期工作 该文件是从数据库导出的 csv 我想
  • 数据库级别的国际化

    谁能向我指出一些解决数据库级别任务国际化的模式 最简单的方法是为每个文本列的每种语言添加一个文本列 但这在某种程度上有点难闻 我真的希望能够动态添加支持的语言 我要提出的解决方案是保存在模型中的一种主要语言和一个查询翻译并将翻译保存到的字典
  • 为什么unique_ptr::~unique_ptr需要T的定义?

    如果我有一堂 酒吧 课 bar h class Bar public Bar 我转发声明与另一个类 Foo 中的 std unique ptr 一起使用 foo h include
  • Visual Studio 2010 - 如何优化

    我正在使用 2010 版的 Visual Studio 但遇到了许多延迟问题 我的计算机具有良好的 RAM 和处理器配置 特别是在保存文件时 目前 我正在进行一个中型项目 只有一个打开文件 ASP NET 页面 使用第三方 Telerik
  • ActionBarSherlock - 无法解析类型 android.support.v4.app.Fragment。它是从所需的 .class 文件间接引用的

    我使用 ActionBarSherlock 作为一个项目中的库项目 该项目本身就是一个库 一切都工作正常 直到我将项目移至新计算机并更新了 SDK 工具 我有这个错误我不明白 当我创建一个扩展 SherlockFragment 的类时 如下
  • xCode Instruments 检测到的这些内存泄漏对象是什么?

    我有一个 iPhone 应用程序 似乎存在内存泄漏问题 这是一款益智游戏 在玩了几个谜题后 应用程序在设备上崩溃了 我现在尝试使用 xcode Instruments 来检测发生了什么 第一次使用仪器 我注意到 泄漏 图中有一个泄漏栏 就在
  • JTextField 中的下拉列表

    我不知道当我在文本字段中输入一些字母时 应该从我的数据库中选取相关项目并应显示为下拉列表 例如 我在文本字段中输入了 J 在我的数据库中具有诸如 Juby Jaz Jasmine Joggy 之类的名称 这些名称应显示为列表 这样我就可以从
  • MSChart 中系列和数据点的所有可用自定义属性的最终列表

    我正在使用 NET 3 5 MSChart 控件 有时我发现我需要向系列或数据点添加自定义属性 例如 Series series new Series series PieDrawingStyle SoftEdge DataPoint po
  • Graphql 没有为接口/联合定义解析器 - java

    我在使用这种方法添加解析器时遇到问题graphql RestController RequestMapping api dictionary RequiredArgsConstructor onConstructor Autowired p
  • C# 中是否有与 HashSet 等效的 AddRange

    通过列表 您可以执行以下操作 list AddRange otherCollection a 中没有添加范围方法HashSet 添加另一个的最佳方法是什么ICollection to a HashSet For HashSet
  • MySQL中如何获取两个值中的最大值?

    我尝试过但失败了 mysql gt select max 1 0 ERROR 1064 42000 You have an error in your SQL syntax check the manual that corresponds
  • twitter bootstrap 下拉菜单的对齐

    我设计了一个带有下拉菜单的引导导航栏 http jsfiddle net yabasha fex8N 3 http jsfiddle net yabasha fex8N 3