0
今朝私は4.0.0 alphaからbetaにBootstrap CDNを更新しました。ブートストラップをアップデートするときにウェブデザインの問題を避けるにはどうすればよいですか？
これは（まだ工事中です）ウェブページが前に見えた方法です：
Website, with Bootstrap 4.0.0 alpha
そして、これが今どのように見えるかです：
あなたが見ることができるように、デザインはかなり崩れています。なぜそれが起こったのですか？ブートストラップを更新したときに何か間違ったことをしたのですか、コードの一部を書き直さなければならないリリースとの大きな違いですか？最初のイメージからわかるように、私はモーダルにいくつか問題がありますが、それは別の問題です。
CDNを更新する前に、プロジェクトからフレームワークを削除して、競合の可能性を回避しました。更新されたCDN：sは、コード内で唯一変更したものです。 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
<!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>
これは、この段階で実際のコードは次のとおり
これは、ヘッドが更新前の見え方であります
.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
2番目の 'head'にはブートストラップCSSは含まれていません。 – Vucko
@Vuckoご協力いただきありがとうございます！それが問題でした！今はウェブサイトが以前と同じように見えます！ – josefdev