Bootstrap 3 导航丸不起作用

2024-04-12

我已遵循文档,但我不确定为什么我的pills不工作。

HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script src="assets/js/script.js"></script>
    <link rel="stylesheet" media="all" href="assets/css/style.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="row">
    <nav class="nav navbar-nav">
         <ul class="nav nav-pills">
            <li>blah</li> 
        </ul>
    </nav>

    </div>
</div>

</body>
</html>

您的预期结果是什么?你能尝试插入一些吗<li>标签看看是否能正常工作?

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

FYI: http://getbootstrap.com/components/#nav-pills http://getbootstrap.com/components/#nav-pills

另请附上上面指定的 asset/css/style.css 文件。建议将Bootstrap CDN放置在顶部<head>,位于您的自定义 css 文件上方。

===========更新==========

<!DOCTYPE html>
<html>
 <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
 </head>
 <body>
  <div class="container">
    <div class="row">
      <nav class="nav navbar-nav">
         <ul class="nav nav-pills">
            <li role="presentation"><a href="#">Blah</a></li>
            <li role="presentation"><a href="#">Blah</a></li>
            <li role="presentation"><a href="#">Blah</a></li>
        </ul>
      </nav>
    </div>
  </div>
 </body>
</html>

Result:

这就是你预期的药丸效果吗?

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

Bootstrap 3 导航丸不起作用 的相关文章

  • MVC 4 使用 Bootstrap 编辑模态表单

    我正在使用 MVC 4 和实体框架来开发 Intranet Web 应用程序 我有一个可以通过编辑操作进行修改的人员列表 我想通过使用模态表单使我的应用程序更加动态 所以我尝试将我的编辑视图放入我的 Bootstrap 模式中 我有两个问题
  • Bootstrap 3 网格,一行中有多少列“真的”重要吗?

    我有一个表单布局 上面有 Bootstrap 3 表单组 我希望这些表单组在 我显然让它工作得很好 但是在这里阅读了一些内容后 我所做的似乎违反了假设的规则 即一行中的每一列加起来必须等于 12 但是我能找到的每个教程和文档总是使用诸如 应
  • 使列在引导程序中固定位置

    使用 Bootstrap 我有一个网格列 class col lg 3 我想将其放置在位置 固定 而另一个 col lg 9 是正常位置 可滚动页面 div class row div class col lg 3 Fixed conten
  • bootstrap-3 在 div 底部对齐链接和按钮

    从下面的屏幕截图中可以看出 链接并未在底部对齐div 如何对齐按钮edit delete add cart在底部div 注意我没有使用table bottomaligned position absolute bottom 0 margin
  • Bootstrap 轮播图像不按比例缩放

    我的轮播填充了页面的宽度 但是当我缩小窗口时 y 轴没有响应 一探究竟here http sacgamehub com index html 如何保持原始图像比例 保留轮播中所有图像的明确尺寸 它应该可以正常工作
  • 当用户滚动到页面底部时显示页脚

    这是我的页脚代码 div class row div class col md 12 div the part that always showing at the bottom div div div class col md 12 di
  • 选项卡的 AngularJS 控制器

    我的页面中有三个选项卡 我在用着tabset and tab根据Angular 引导文档 https angular ui github io bootstrap tabs 我设置了一个控制器 div 其中有tabsetas div cla
  • Android 上的 Chrome 强制隐藏地址栏

    我最近开发了一个获取混合 http https 内容的网站 因此 我总是将地址栏显示在顶部 它不会像其他网站那样自动隐藏 这就是我要说的 This https planetkde org 是网站的链接 内容是从各种来源获取的 因此无法过滤非
  • Twitter bootstrap 远程模式每次都显示相同的内容

    我正在使用 Twitter bootstrap 我已经指定了一个模式 div class modal hide div class modal header div div
  • 如何使用 jQuery Validate 正确验证放置在多个选项卡上的 Twitter Bootstrap 表单?

    我有一个表单位于多个 Twitter 的 Bootstrap 选项卡上
  • 根据屏幕尺寸更改图像 src

    我正在尝试使用媒体查询根据屏幕尺寸更改图像 src 我尝试过背景 url x 但它不起作用 我在某处读到我应该使用 content url x 代替 但是当我这样做时 我得到一个空白页面 谁能告诉我我的代码有什么问题吗 HTML div c
  • Bootstrap Glyphicons 在 IE10 或 FF 中不显示

    我无法在 IE10 或 FF 中显示引导字形图标 我正在使用最新的 bootstrap 3 代码 并以标准方式包含字形 span class glyphicon glyphicon edit span 它们在 Chrome 中工作正常 但在
  • Twitter 引导工具提示不适用于全日历中的事件

    我想显示有关事件的引导工具提示亚当 肖的完整日历 http fullcalendar io 我尝试了这段代码 eventMouseover function event jsEvent this tooltip this css rel t
  • 在 Rails 3.2 + SimpleForm 中显示嵌套表单有错误的字段

    我有一个Flight模型嵌套在一个FlightLog模型 AFlightLog可能包含许多航班 我使用 SimpleForm 进行引导安装 这样当验证失败时 可以用错误类包围带有错误的表单元素 问题是 即使触发了嵌套模型的验证 simple
  • BootStrap3 单击该项目后保持下拉菜单打开

    我正在使用 Bootstrap 3 0 它具有出色的下拉菜单 如果我单击下拉菜单之外的区域 菜单就会消失 这没关系 但是当我单击下拉菜单项时 菜单消失 我不希望发生这种情况 并且没有选项可以控制切换行为 我希望菜单在单击其中一项后保持打开状
  • 带圆角边框的 Div

    我不明白获得 div 的更大圆角底部边框的公式 以及是否有更简单的方法在 Bootstrap 中实现它 现在是这样的 以及我想如何开发它 header background color blue height 40px width 90px
  • 从 Bootstrap 4 网格中删除装订线

    在 Bootstrap 4 中 我被要求自定义桌面的默认网格系统 如下所示 其中 容器 桌面断点为1280px 我尝试过的例子是 body margin top 3rem l wrap max width 1280px margin rig
  • 如何使用 jQuery 单击特定链接时打开引导导航选项卡的特定选项卡?

    我是 jquery 和 bootstrap 的新手 所以请考虑我的错误 我已经创建了一个用于登录和注册的 bootstrap 模式 它包含两个导航选项卡 称为登录和注册 我有两个按钮可以弹出相同的模态窗口 但在模态窗口内显示不同的选项卡 每
  • 如何从 bootstrap-markdown.js 调用 .getContent 和 .parseContent

    我是使用 Bootstrap 插件的新手 刚刚通过代码学院 http www codecademy com en skills make an interactive website 我真的很想用这个很棒的引导 Markdown 插件 ht
  • Bootstrap 选择的自定义样式

    我发现选择 Twitter Bootstrap 的下拉菜单非常丑陋 如何仅针对选择小部件停 用 Bootstrap 或者是否可以自定义选择下拉列表的外观 一探究竟 https developer snapappointments com b

随机推荐