Question

我正在尝试将我的代码放在Github Pages上。它显示和工作，但样式是关闭的，我附加了当我在本地测试index.html与打开我的github.io页面时的样子。当我在本地进行测试时，如何让它看起来像？

     <head>
     <script src="jquery-3.1.1.min.js"></script>
     <link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
     <script src="bootstrap.min.js"></script>
     <link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="utf-8">
     <script src="examples.js" defer></script>
     <!-- stylesheet -->
     <link rel="stylesheet" type="text/css" href="main.scss">
     </head>

我的main.scss：

#utable {

background-color: #e6e6e6;
width: 75%;
margin-left: 40px;
}


input {
text-align: right;
display: block !important; 
padding: 0 !important; 
margin: 0 !important; 
border: 0 !important; 
width: 98% !important; 
border-radius: 0 !important; 
line-height: 1 !important;

}
td {
margin: 0 !important; 
padding: 0 !important;
border: 0;
}
tr {
margin: 0 !important; 
padding: 0 !important;
border: 0;
}

.box {
background-color: #e6e6e6;
width: 75%;
margin-left: 40px;

padding: 3px;
}

hr { 
background-color: #1F5D15 !important;
color: #1F5D15 !important;
border: solid 2px #1F5D15 !important;
heigth: 1px !important;
width: 100% !important;   
}

.form-control {margin:0;
display: inline-block;
}

body {
width: 95%;
margin:0;
padding-top:50px;
}

.tab {
margin-left: 40px; 
}

tr.spacer {
border-bottom: 15px solid #e6e6e6;
}



#masthead {
min-height:270px;
background-color:#1F5D15;
color:#aaaacc;
}

#masthead h1 {
font-size: 55px;
line-height: 1;
}

#masthead .well {
margin-top:13%;
background-color:#FFFFFF;
border-color:#1F5D15;
}

.icon-bar {
background-color:#fff;
}

@media screen and (min-width: 768px) {
#masthead h1 {
    font-size: 100px;
}
}

.navbar-bright {
background-color:#111155;
color:#fff;
}

.navbar-bright a, #masthead a, #masthead .lead {
color:#aaaacc;
}

.navbar-bright li > a:hover {
background-color:#000033;
}

.affix-top,.affix{
position: static;
}

@media (min-width: 979px) {
#sidebar.affix-top {
position: static;
margin-top:30px;
width:228px;
}

#sidebar.affix-bottom {
position: relative;
}

#sidebar.affix {
position: fixed;
top:70px;
width:228px;
  }
}

#sidebar li.active {
border:0 #eee solid;
border-right-width:4px;
}

#sidebar li li.active {
border:0 #ccc solid;
border-right-width:3px;
}

#mainCol h2 {
padding-top: 55px;
margin-top: -55px;
}

Answer 1

问题是您的文件位置错误

<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="bootstrap.min.js"></script>

您必须检查css，js文件的位置。上传到服务器时，必须更正此问题。它就像

 <link href="https://myreponame.github.io/bootstrap.min.css" rel="stylesheet" type="text/css" />
 <script src="https://myreponame.github.io/bootstrap.min.js"></script>

或者您可以使用CDN

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

我也遇到了同样的问题。我尝试了不同的方法，但CSS仍无法在GitHub Pages上运行。

解决方案：首先在PC上本地制作完整的项目，完成后创建一个存储库，然后单击“上传现有文件”选项：

(preview)

然后只需拖放整个项目即可。

如果要在网站上进行编辑，请直接从GitHub仪表板编辑代码。不要在GitHub页面上使用命令行。

Bootstrap / CSS无法在Github Pages上运行

2 个答案: