【发布时间】：2018-04-12 18:20:24
【问题描述】：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!--font awesome-->
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<title>Hello, world!</title>
<link rel="stylesheet" href="./main.css">
<link rel="stylesheet" href="./test.css">
</head>
<body>
<!--scripts-->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./test.js"></script>
<!-- <button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span> -->
<div class="row justify-content-center test" id="button1">
<h1 class="status">Status of program</h1>
<div class="col-xs-offset-1">
<button type="button" class="btn btn-md" onclick="show(this)">Just an Idea</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
<button type="button" class="btn btn-md" onclick="show(this)">In Development</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
<button type="button" class="btn btn-md" onclick="show(this)">Being Polited</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
<button type="button" class="btn btn-md" onclick="show(this)">Proof Tested</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
<button type="button" class="btn btn-md" onclick="show(this)">Operationals</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</div>
</div>
<div class="row justify-content-center">
<div>
<h2 class="status">Rate the value of Your Idea will Provide</h2>
</div>
<div class="row">
<table class="table table-responsive" id="table">
<tbody id="tbody">
<tr class="test">
<td>
Client Experience
</td>
<td>
<button type="button" class="btn btn-xs" onclick="show(this)">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Collaboration
</td>
<td>
<button type="button" class="btn btn-xs" onclick="show(this)">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Money
</td>
<td>
<button type="button" class="btn btn-xs" onclick="show(this)">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Time
</td>
<td>
<button type="button" class="btn btn-xs" onclick="show(this)">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Quality
</td>
<td>
<button type="button" class="btn btn-xs" onclick="show(this)">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>嗨 我使用 BootstrapCDN 编写了一个使用 bootstrap 版本 3.3.7 的小 html 页面
看起来还不错
我想改成4.1.0版本后
我刚刚从 bootstrap 官方网站将 CDN 版本从 3.3.7 更改为 4.1.0，但它改变了我页面的整体对齐方式，如下所示 请帮帮我
提前致谢
【问题讨论】：
-
Bootstrap 4 是一个新的主要版本，因此您应该预料到会出现问题。请参阅迁移文档：getbootstrap.com/docs/4.1/migration/#summary
-
当您反对投票时，请说明原因，因为没有问题，任何人都不会发帖..
标签： css html twitter-bootstrap bootstrap-4