我的网站曾经使用 Boostrap 3.3.4，自从我迁移到 Bootstrap 4 后，一切都坏了。
基本上我网站的结构非常简单，一个包含一些 jumbotrons 和一些 panels
<body>
<section class="container">
<div class="jumbotron vertical-center">
<div><img src="img/hello.jpg" style="width: 35%" class="img-responsive" title="Hello" alt="World"></div>
<h2>my website!!</h2>
<div class="panel panel-default">
<div class="panel-body">
<h4> stackoverflow </h4>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<h4><span class="glyphicon glyphicon-education" aria-hidden="true"></span><strong> This is reall cool! </h4>
</div>
</div>
等等。
CSS 很简单
.container {
max-width: 600px;
background:white;
padding: 30px 30px;
text-align: center;
background: transparent;
}
.jumbotron {
background: white;
}
在这里，我会有一套居中、响应的漂亮 block (带有圆形边缘)，不会占据屏幕的整个宽度。
我不知道如何使用 Bootstrap 4 进行调整。
最佳答案
无论何时使用任何软件从一个主要版本切换到另一个主要版本，您都应该期待重大更改。
就 Bootstrap 而言，它不仅仅是重大变更。它几乎是一个全新的库(事实上，它在很大程度上是完全重写的!)。在开发方面，将其视为与旧库相似的不同库模糊。
我能给你的最好建议是恢复到 v3。如果您想利用完全开发的产品，请使用可用的最新 v3。就开发时间和/或投资而言，升级将功能性网站从 Bootstrap v3 切换到 Bootstrap v4 的现实案例很少。
如果您真的下定决心要这样做(可能出于教育目的或其他目的)，请考虑使用 v4 从头开始重建它。如果您确实需要转换旧模板(HTML 标记)，请通过 Bootstrap 运行它们 v3 to v4 markup converter .
但请记住，即使使用这个工具或类似工具，考虑到架构、布局、JavaScript 插件、表单元素方面的所有变化，从 glyphicons 切换到 font awesome，从 LESS 切换到 SASS，重命名变量，更改响应断点以及您(或任何 v3 主题/插件/附加组件)当前可能用于覆盖默认值的任何自定义 CSS，您仍然有很多机会搞砸它并且您会更好(并且拥有更好的最终产品)如果你从头开始重建，恕我直言。
从 v3 迁移到 v4 在以下方面更有意义:“我过去使用 v3 开发网站，现在我在新元素中使用 v4”，而不是 “我升级了从 v3 到 v4 的网站”。
v3 不会过时，也不会持续很多年。
事实上，目前它是比 v4 更适合生产环境的选择。在这方面，快速浏览bootstrap-4问题，将确认它(尚未)准备好生产。在广泛使用的设备上，基本功能仍然存在问题或至少开发不足。
在您的标记的特定情况下，应该这样做:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="container">
<div class="jumbotron vertical-center">
<div class="d-flex justify-content-around align-items-center">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" style="width: 35%" class="img-fluid" title="Hello" alt="World">
</div>
<h2>my website!!</h2>
<div class="card">
<div class="card-body">
<h4> stack<b>overflow</b> </h4>
</div>
</div>
<div class="card">
<div class="card-body">
<h4><i class="fa fa-university"></i><strong> This is reall cool! </strong></h4>
</div>
</div>
</div>
</section>注意我替换了glyphicon与 fa因为 Bootstrap v4 使用字体很棒的图标，我也将 Logo 居中作为提醒 v4 使用 flexbox 居中和均匀分布，如果你需要它(即:将 <h2> 放在 .d-flex 中对齐和分布 Logo )
关于html - 将 Bootstrap 从 3.3.4 升级到 4.0，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49091275/