HTML/CSS : Bootstrap navigation bar isn't responsive-6ren

HTML/CSS : Bootstrap navigation bar isn't responsive

转载作者：太空宇宙更新时间：2023-11-04 11:30:01

25

4

我在网页顶部使用 Bootstrap 导航栏。与许多 Bootstrap 导航栏非常相似，这个特定的导航栏会在页面达到一定长度时折叠，并且所有标题都会进入页面右上角的按钮。问题是，单击按钮时，导航栏不显示标题。

这里有一个问题:特别是在这一页上，并且只有这一页，栏不起作用。事实上，该按钮似乎是灰色的。

(我会提供图片，但 Stackoverflow 不允许我放置链接，因为我是新用户)

我曾尝试用此页面替换其他页面的导航栏 - 不起作用。

和

我尝试用其他页面的导航栏替换此导航栏 - 效果非常好。

这让我相信这个页面上还有其他东西导致导航栏被“禁用”，或者有什么东西导致它不显示，比如缺少标签。我已经对我的代码进行了完整的搜索，但找不到它。

正如我之前所说，问题是，它只出现在一页上；没有别人。鉴于有人愿意搜索我的源代码，我在下面提供了一些源代码以查找语法错误。

另请注意，我在我的代码中包含了一个 Lightbox 照片库，并在底部放置了外部链接和脚本。

<head> <!--HEAD START-->
    <meta name="description" content="Description"/>
    <meta name="keyword" content="keyword"/>
    <meta name="robots" content="index, follow"/>
    <link rel="icon" href="img/icon.jpg"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
    <link rel="stylesheet" href="css/stylesheet.css">
    <link rel="stylesheet" href="css/lightbox.css">
    <script language="JavaScript" rel="text/javascript" src="js/logic.js"></script>
    <title> Title </title>
</head><!--HEAD END-->

<body><!--BODY START-->
    <noscript>
        Please enable JavaScript to view this page's content
    </noscript>
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html">Navbar Title</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="news.html">News</a></li>
                        <li><a href="theassociation.html">The Association</a></li>
                        <li class="active"><a href="#">Photo Gallery </a></li>
                        <li><a href="about.html">About</a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </nav>
        <div id="container"><!--CONTAINER START-->
            <div class="jumbotron"><!--JUMBOTRON START-->
                <h1> Title </h1>
                <h6> Lorem ipsum dolar sit amat </h6>
            </div><!--JUMBOTRON END-->
     </div><!--CONTAINER END-->
    <hr/>
    <div class="page-header" id="heading2">
        <h2> Photo Gallery <br/> <small class="style"> See pictures from the 2015-2016 Season </small></h2>
    </div>
    <div class="container">
        <hr/>
        <div class="gallery">
            <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
            </div>
            <div class="row">
                <hr/>
            </div>
        </div>
    </div>

        <footer class="footer"><!--FOOTER START-->

            <div class="container">
                <p class="text-muted">
                    &copy; <script> writeDate(); </script>, All rights reserved.
                </p>
            </div>
        </footer><!--FOOTER END-->

<!-- SCRIPTS MUST BE PLACED AT THE BOTTOM OF THE PAGE FOR PROPER EXECUTION OF ELEMENTS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script language="JavaScript" rel="text/javascript" src="js/lightbox.js"></script>
</body><!--BODY END-->
</html>

最佳答案

我认为您缺少 Bootstrap javascript 库？

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

关于HTML/CSS : Bootstrap navigation bar isn't responsive，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32082775/

25

4

0

文章推荐： linux - 异步 libmemcached 用法

文章推荐： linux - Ubuntu inet addr 不断变化

文章推荐： javascript - Jquery 灯箱不向下延伸

c# - 无法从 Func 转换为 Func
我对这个错误很困惑: Cannot implicitly convert type 'System.Func [c:\Program Files (x86)\Reference Assemblies\
rust - 所有 T、&T、&mut T、[T]、&[T]、*mut T 的通用实现
考虑这段代码: pub trait Hello { fn hello(&self); } impl Hello for Any { fn hello(&self) {
c++ - "T t = {};"和 "T t{};"可以产生不同的结果吗？
问题很简单。是否可以构造这样一个类型 T，对于它下面的两个变量声明会产生不同的结果？ T t1 = {}; T t2{}; 我已经研究 cppreference 和标准一个多小时了，我了解以下内容:
java - Comparator中的compare(T,T)不能应用于(T,T)
Intellij idea 给我这个错误:“Compare (T, T) in Comparator cannot be applied to (T, T)” 对于以下代码: public class
php -\n\t\t\t\t\在php中的含义和用途是什么
任何人都可以告诉我 : n\t\t\t\t\n\t\t\t 在以下来自和 dwr 服务的响应中的含义和用途是什么. \r\n\t\t\t \r\n\t\t\t
c++ - "T a"、 "T a()"和 "T a=T()"之间有什么区别，其中 T 是一个类？
让 T 成为一个 C++ 类。下面三个指令在行为上有什么区别吗？ T a; T a(); T a = T(); T 为不带参数的构造函数提供了显式定义这一事实是否对问题有任何改变？后续问题:如果
Rust中的智能指针:BoxRcArcCellRefCellWeak
Rust中的智能指针是什么智能指针（smart pointers）是一类数据结构，是拥有数据所有权和额外功能的指针。是指针的进一步发展指针（pointer）是一个包含内存地
c++ - 交替排序数组的最简单方法是什么(例如 :T, T,F,F,F,T,F,T,F,F,F 到 T,F,T,F,T,F,T,F,T,T ,T)?
比如我有一个 vector vector > v={{true,1},{true,2},{false,3},{false,4},{false,5},{true,6},{false,7},{true,8
Python 3 Pandas - 带有额外\n\t\t\t\t\t 的列
我有一个来自 .xls 电子表格的数据框，我打印了 print(df.columns.values) 列，输出包含一个名为:Poll Responses\n\t\t\t\t\t。我查看了 Excel
java - 为什么Stream.reduce采用BinaryOperator 而不是BiFunction ？
This question already has answers here: What are good reasons for choosing invariance in an API like
rust - &T 和 T/&, ~T 和 T/~ 的区别
指针类型作为类型前缀与在类型前加斜杠作为后缀有什么区别。斜线到底是什么意思？最佳答案语法 T/~ 和 T/& 基本上已被弃用(我什至不确定编译器是否仍然接受它)。在向新向量方案过渡的初始阶段，[T
c++ - 如何从 T、T& 或 T* 模板参数中获取 T*
我正在尝试找到一种方法来获取模板参数的基类。考虑以下类: template class Foo { public: Foo(){}; ~Foo(){};
c++ - 当 T 声明为 T::T(T&) 时，std::is_trivially_constructible::value 的结果不正确
这是一个让我感到困惑的小问题。我不知道如何描述它，所以只看下面的代码: struct B { B() {} B(B&) { std::cout ::value #include
c++ - T::T(T&)有什么用？
为什么有 T::T(T&) 而 T::T(const T&) 更适合 copy ？ (大概是用来实现move语义的？？？) 原始描述(被melpomene证明是错误的): 在C++11中，支持了一种新
java - 类型参数 T 使用 Eclipse 在 T[] toArray(T[] a) 中隐藏类型 T
在 Java 7 中使用 eclipse 4.2 并尝试实现 List 接口(interface)的以下方法时，我收到了警告。 public T[] toArray(T[] a) { ret
foo[T](T,T) : T 的 Scala 类型扩展/推断
假设有三个函数: def foo[T](a:T, b:T): T = a def test1 = foo(1, "2") def test2 = foo(List(), ListBuffer()) 虽
generics - 通用类型统一 : multiple parameters (T, T) 与多个参数列表 (T)(T)？
我对柯里化(Currying)和非柯里化(Currying)泛型函数之间类型检查的差异有点困惑: scala> def x[T](a: T, b: T) = (a == b) x: [T](a: T,
c++ - 转发引用 : returning T when given T&& and T& when given T&
考虑一个类A，我如何编写一个具有与相同行为的模板 A& pretty(A& x) { /* make x pretty */ return x; } A pretty(A&& x) {
java - 为什么在 T 是类型参数而 t 是变量的情况下不允许使用 "t instanceof T"？
Eclipse 表示由于泛型类型橡皮擦，类型参数不允许使用 instanceof 操作。我同意在运行时不会保留任何类型信息。但是请考虑以下类的通用声明: class SomeClass{ T
c++ - T t {x} 和 T t = { x } 对于整数或枚举类型的区别？
在 C++14 中: 对于任何整数或枚举类型 T 以及对于任何表达式 expr: 有没有区别: struct S { T t { expr }; }; 和 struct S { T t = { exp

首页

博学

6Ren·AI

商城

HTML/CSS : Bootstrap navigation bar isn't responsive