Bootstrap/CSS在Github Pages上不起作用 [英] Bootstrap / CSS not working on Github Pages
本文介绍了Bootstrap/CSS在Github Pages上不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正试图将我的代码放在Github Pages上.它可以显示并正常工作，但是样式已关闭，我将附加在本地测试index.html与打开github.io页面时的外观图片.在本地进行测试时，如何显示它的外观?
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>
我的main.scss:
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;
}
推荐答案
问题是您的文件位置错误
The problem is your file location is wrong
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="bootstrap.min.js"></script>
您必须检查css，js文件的位置.当您上载到服务器时，必须对此进行更正.就像
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>
或者您可以使用CDN
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>
这篇关于Bootstrap/CSS在Github Pages上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
