Fatal编程技术网
  • html/
  • Html 链接到引导的本地副本会破坏CSS

Html 链接到引导的本地副本会破坏CSS

html css twitter-bootstrap twitter-bootstrap-3

Html 链接到引导的本地副本会破坏CSS,html,css,twitter-bootstrap,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,这就是问题所在。我正在为工作开发angular+bootstrap应用程序，我正处于开发的初始阶段。我正在尝试使用引导构建一些UI。然而，由于某些原因，每当我链接到引导的本地副本时，所有css都会中断。它是否缩小并不重要 这是我现在拥有的 <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <

这就是问题所在。我正在为工作开发angular+bootstrap应用程序，我正处于开发的初始阶段。我正在尝试使用引导构建一些UI。然而，由于某些原因，每当我链接到引导的本地副本时，所有css都会中断。它是否缩小并不重要

这是我现在拥有的

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/client/app/lib/bootstrap/bootstrap.css">
    <!-- Latest compiled and minified CSS -->
    <!--<link rel="stylesheet"     href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
    integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">-->
</head>
<nav>
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation"><a>Option A</a></li>
            <li role="presentation"><a>Option B</a></li>
            <li role="presentation"><a>Option C</a></li>
            <li role="presentation" class="active"><a>Option D</a></li>
        </ul>
</nav>
<body>


    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">Stuff goes here!</div>
        </div>
    </div>

</body>
</html>
编辑2

我正在查看Chrome中的开发者工具，看看会有什么错误（多亏Anonymouse给了我这个想法），下面是弹出的内容

Uncaught SyntaxError: Unexpected token <              bootstrap.js:1
不要使用CDN，而是从中获取本地版本。这是由于简单、快速和灵活性。您所要做的（我也这么做），就是在root中创建一个脚本，以使用cdn升级我的所有本地LIB（见下文）

如果您的问题是使用CDN，这也是一个解决方案。

好消息

我解决了这个问题。问题源于我的服务器代码

这是代码供参考

var express = require('express');
var path = require('path');
var app = express();
var rootPath = path.normalize(__dirname + '/../');

app.use(express.static(rootPath + '/app'));

app.get('*', function(req, res) { res.sendFile( rootPath + 'client/app/core/index.html'); });

app.listen(8000);
console.log('Listening on port 8000...');
问题就在眼前

app.use(express.static(rootPath + '/app');
应该是的

app.use(express.static(rootPath + 'client/app');
当express扫描css和js文件时，我没有确保路径正确

故事的寓意是，永远不要掩盖小细节。

您是否尝试过将cdn版本复制到您的引导程序中。CSW您所说的“如果我……提交我的本地副本，一切正常”是什么意思？尝试确认您使用的是指向本地CSS文件的正确路径。@frederickf我可以确认指向本地CSS文件的路径是正确的。@AguV我只是尝试了一下，没有用。我的本地版本来自引导站点。另外，我将尝试一下。@muffinekid然后删除CDN链接，并取消对本地的注释。你还需要JS，我也建议使用CSS映射（为了调试目的）。做了所有这些，但由于某些原因它仍然不起作用。@Muffeinkid开发人员控制台中有错误吗？有两个错误，我用这些错误更新了帖子 
var express = require('express');
var path = require('path');
var app = express();
var rootPath = path.normalize(__dirname + '/../');

app.use(express.static(rootPath + '/app'));

app.get('*', function(req, res) { res.sendFile( rootPath + 'client/app/core/index.html'); });

app.listen(8000);
console.log('Listening on port 8000...');

app.use(express.static(rootPath + '/app');

app.use(express.static(rootPath + 'client/app');