当前位置: 首页 > 面试题库 >

Bootstrap Navbar列表项/链接未显示

太叔睿
2023-03-14
问题内容

我正在学习使用Bootstrap并使用组件,尤其是导航栏。

我的链接/列表项未显示。我直接从Bootstrap复制了代码。我希望有人可以解释我所缺少的。

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>NavBar</title>

    <!-- bootstrap css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>    
<body>      
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Navbar</a>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="#">Features</a>
                <a class="nav-item nav-link" href="#">Pricing</a>
                <a class="nav-item nav-link disabled" href="#">Disabled</a>
            </div>
        </div>
    </nav>      
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous">
    </script>   
</body>

问题答案:

Bootstrap 4中navbar-expand-*需要使用该类来显示水平导航栏,否则它将折叠成其移动状态。

或者 ,使用Codeply,它将为您提供所有相关的库:Codeply上的Bootstrap4

这是带有 Bootstrap 4.0.0 的导航

<nav class="navbar navbar-expand-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">Features</a>
            <a class="nav-item nav-link" href="#">Pricing</a>
            <a class="nav-item nav-link disabled" href="#">Disabled</a>
        </div>
    </div>
</nav>


 类似资料:
  • 我在Wordpress中有一个文章网格,下面是按类别排序的默认方法: 有办法把这个变成下拉列表吗?我为类似的情况找到了不同的解决方案,但它们都有作为无序列表的好处(ul li)。我的只是一堆链接。

  • 实现 (Implementation) 该算法的实现如下 - #include <stdio.h> #include <stdlib.h> struct node { int data; struct node *prev; struct node *next; }; struct node *head = NULL; struct node *last = NULL; stru

  • 实现 (Implementation) 该算法的实现如下 - #include <stdio.h> #include <stdlib.h> struct node { int data; struct node *next; }; struct node *head = NULL; struct node *current = NULL; //insert link at the fi

  • 实现 (Implementation) 该算法的实现如下 - #include <stdio.h> #include <stdlib.h> struct node { int data; struct node *next; }; struct node *head = NULL; struct node *current = NULL; //display the list void

  • 问题内容: 如果我在java中的链表上使用了for-each循环,是否可以保证以它们在列表中出现的顺序迭代元素? 问题答案: 保证链表按顺序运行。 从文档中 有序集合(也称为序列)。该界面的用户可以精确控制列表中每个元素的插入位置。用户可以通过其整数索引(列表中的位置)访问元素,并在列表中搜索元素。 iterator() 以适当的顺序返回此列表中元素的迭代器。