Question

我曾经将我的网站设为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;
}

在这里，我将拥有一套居中，响应漂亮的块（带有roundede边缘），不会占用整个屏幕宽度。

我不知道如何使用Bootstrap 4进行调整。

Answer 1

每当您使用任何软件从一个主要版本切换到另一个主要版本时，您应该会发生重大变化。

对于Bootstrap，它不仅仅是突破 - 更改。它几乎是一个全新的库（实际上，它在很大程度上完全被重写了！）。在发展方面，把它想象成一个不同的库模糊类似于旧库。

我能给你的最好建议是恢复到v3。如果您想充分利用完全开发的产品，请使用最新的v3。现实生活中很少有升级将功能网站从Bootstrap v3切换到Bootstrap v4在开发时间和/或投资方面是有意义的。

如果您真的决定这样做（可能出于教育目的或诸如此类的原因），请考虑使用v4从头开始重建。如果确实需要转换旧模板（HTML标记），请通过Bootstrap v3 to v4 markup converter运行它们。

但请记住，即使使用此工具或类似工具，考虑到架构，布局，JavaScript插件，表单元素方面的所有更改，从glyphicons切换到字体很棒，从LESS切换到SASS，重命名变量，更改响应断点任何自定义CSS你（或任何v3主题/插件/插件）当前可能用于覆盖默认值，你仍然有很多机会弄乱它并且你会变得更好（并且有一个优秀的最终产品））如果你从头开始重建，恕我直言。

从v3到v4在以下方面更有意义：＆＃34;我曾经使用v3开发网站，现在我在新项目中使用v4＆＃34; ，而不是< em>＆＃34;我将网站从v3升级到v4＆＃34; v3 不会过时，也不会好多年 事实上，对于生产环境而言，它比目前的v4更适合。在这方面，快速查看bootstrap-4个问题，将确认它尚未准备就绪。在广泛使用的设备上，基本功能仍然被破坏或至少未开发。

在标记的特定情况下，应该这样做：

＆＃13;

<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>

＆＃13;

注意我将glyphicon替换为fa，因为Bootstrap v4使用了字体真棒图标，我还将徽标作为提醒集中v4使用flexbox居中并均匀分布，如果您需要它（即：将<h2>放在.d-flex内，以便与徽标对齐和分配）

将Bootstrap从3.3.4升级到4.0

1 个答案: