Bootstrap / CSS 不适用于 Github 页面答案

【问题标题】：Bootstrap / CSS not working on Github PagesBootstrap / CSS 不适用于 Github 页面
【发布时间】：2017-07-20 04:40:40
【问题描述】：

我正在尝试将我的代码放在 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;
}

【问题讨论】：

你需要将你的SCSS文件编译成CSS。
成功了，谢谢！

标签： css twitter-bootstrap-3 github-pages

【解决方案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>

【讨论】：

呢？像我需要为 jquery 做类似的事情还是这些功能不起作用？
您需要知道服务器上的 jquery 链接到底在哪里。这就像引导文件。您可以用

【解决方案2】：

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

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

然后只需拖放整个项目。

如果您想在您的网站上编辑某些内容，请直接从 GitHub 仪表板编辑代码。不要对 GitHub 页面使用命令行。

【讨论】：