0
今天早上我更新了Bootstrap CDN，從4.0.0 alpha升級到beta。更新引導程序時，如何避免網頁設計出現問題？
這是網頁（目前尚在建設中）如何看待前：
Website, with Bootstrap 4.0.0 alpha
，這是它現在的樣子：
正如你所看到的，設計幾乎瓦解。它爲什麼發生？當我更新Bootstrap時，我做錯了什麼嗎？或者是我必須重寫部分代碼的版本之間的差異如此之大。正如你在第一張圖片中看到的，我對模態有一些問題，但這是另一回事。
在我更新CDN之前，我從項目中刪除了框架以避免潛在的衝突。更新後的CDN是我在代碼中做出的唯一更改。
這是頭更新之前的樣子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<!-- BootStrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/layout.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700i,900" rel="stylesheet">
<!-- JS -->
<script src="js/frontend.js"></script>
<script src="js/backend.js"></script>
<title>Continuous integration for GIT repositories</title>
</head>
這是實際在這個階段的代碼： CIApp.html：
<!DOCTYPE html>
<html lang="en">
<!-- All images included in the project is free for commercial use -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CDN -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700i,900" rel="stylesheet">
<!-- JS -->
<script src="js/frontend.js"></script>
<script src="js/backend.js"></script>
<title>Continuous integration for GIT repositories</title>
</head>
<body>
<!-- Kod för navigationsmeny-->
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mb-0" href="#">Continuous integration</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#Git">Add Git Repository</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#TestReport">View test results</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Logout</button>
</form>
</div>
</nav>
<div id="upperHalf">
<div class="row"></div>
<div class="col-6 .col-md-4">
<h1 id="headLine">Enter your Git please</h1>
</div>
</div>
<div id="lowerHalf">
<div class="enterGitContainer">
<div class="text-left">
<form class="col-sm-10 form-group-lg">
<div class="form-group">
<div class="projectNameContainer">
<label id="nameLabel" class="from-control-label" for="projectNameInput">Name your project</label>
<input type="text" class="form-control form-control-lg" id="projectNameInput">
</div>
</div>
<div class="form-group">
<div class="gitRepoContainer">
<label id="gitLabel" class="from-control-label" for="repoInput">Enter you Git repository</label>
<input type="text" class="form-control form-control-lg" id="repoInput">
</div>
</div>
<button class="btn btn-outline-success" id="submitRepo" onclick="storeRepo()" type="submit">
Submit
</button>
</form>
</div>
</div>
</div>
</body>
</html>
layout.css中
.navbar {
margin-bottom: 0 !important;
border-radius: 0 !important;
border: 0;
}
#headLine{
font-family: "Abril Fatface";
font-size: 100px;
color: #ffffff;
}
#upperHalf {
background: url('../images/modernView.png') 50% 0 no-repeat;
max-width: 100%;
height: 50Vh;
margin: 0;
padding: 200px 0 260px 0;
background-size: cover;
}
#lowerHalf {
background-color: #ffffff;
width: 100%;
color: #333333;
height: 50Vh;
margin: 0 auto;
overflow: hidden;
align-items: center;
justify-content: space-around;
display: flex;
float: none;
padding: 0 0 2rem;
}
#repoInput, #projectNameInput {
min-width: 600px;
max-width: 33%;
}
frontend.js
$(window).on('load',function(){
$('#modalForm').modal('show');
});
它是以前的引導版本和新引導版本之間的變化。您需要更新您的代碼 – sheplu
您的第二個'head'中沒有包含bootstraps CSS。 – Vucko
@Vucko謝謝你的幫助！這是問題！現在該網站看起來像以前一樣！ – josefdev