css - 为什么 bootstrap 不链接到我的 HTML

标签 css html twitter-bootstrap

这里是非常新手的代码。但是我的 Bootstrap 没有链接到我的 html。我正在尝试创建一个导航栏,其中拉出四个列表元素,以便它们位于同一行。

<! DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="main.css">
</head>

    <body>
        <div class="nav">
            <div class="container">
                <ul class="pull-left">
                    <li>ONE</li>
                    <li>TWO</li>
                </ul>

                <ul class="pull-right">
                    <li>LOG IN</li>
                    <li>HELP</li>
                </ul>
            </div> <!--End nav container-->

        </div> <!--End nav-->

    </body>
</html>

截至目前,列表以 HTML 显示列表的默认方式显示。 main.css 的第二个链接只是一个空白文件,我没有在其中做任何事情。这些文件的结构如下:

文档/网络

我的网络文件夹中都有。

最佳答案

省略协议(protocol)会告诉浏览器通过当前正在查看网页的相同协议(protocol)获取链接 ( http://www.paulirish.com/2010/the-protocol-relative-url/)。

您正在本地查看您的 HTML(通过 file://),因此您的浏览器正在解释:

href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"

作为:

href="file://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"

我很确定您的计算机上不存在。

只需为本地开发添加http: 协议(protocol),或将bootstrap.min.css 下载到您的Documents/Web 并将href 更改为相对路径。

关于css - 为什么 bootstrap 不链接到我的 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23396952/

相关文章:

html - bwWrappers 和黑白图片问题

html - 在不使用框架的情况下在具有固定内容的页面上滚动菜单

jquery - 移动设备中的 Bootstrap 透明导航栏

css - Firefox 的 twitter-bootstrap glyphicons 错误

jquery - 使用没有 boostrap 的 angularjs 作为 "front-end ui framework"

javascript - 如何使静态网站的内容可共享

css - 如何将多个样式属性添加到 react 元素?

html - 带有边距和填充的跨度

javascript - JQuery:识别表格文本框列中的重复值并突出显示文本框

iPhone 浏览器为一些 DIV 添加了右边距