Bootstrap / CSS not working on Github Pages

问题

I'm trying to put my code on Github Pages. It shows and works, but the styling is off, I'm attaching pictures of what it looks like when I test index.html locally vs when I open up my github.io page. How do I get it to look like when I'm testing it locally?

     <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>

My 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;
}

回答1:

The problem is your file location is wrong

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

You must check your location of css, js file. When you upload into server, you must correct this. It's like

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

or you can use an 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>

来源：https://stackoverflow.com/questions/45205310/bootstrap-css-not-working-on-github-pages

标签

css

twitter-bootstrap-3

github-pages