间距引导 v5.1.1 与 4.0.0答案

【问题标题】：Spacing Bootstrap v5.1.1 vs 4.0.0间距引导 v5.1.1 与 4.0.0
【发布时间】：2021-11-10 12:34:02
【问题描述】：

我有两页，一页运行 Bootstrap v5.1.1，一页运行 4.0.0，我注意到间距发生了一些变化。

引导 v5.1.1：

.topspacer {
    padding-top: 70px;
}

.righticon {
    float: right;
}

.clear {
    clear: both;
}

a {
    text-decoration: none;
}

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
        <title>Bootstrap 5 | Home</title>
    
    </head>
    <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-warning">
    <a class="navbar-brand" href="#">Bootstrap 5</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto">
        <li class="nav-item active"><a class="nav-link" href="https://mood-tracker.ch/main.php">Home<span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="settings.php">Settings</a></li><li class="nav-item"><a class="nav-link" href="nrew.php">New Entry</a></li><li class="nav-item"><a class="nav-link" href="report.php">Report</a></li></ul>
                <ul class="nav navbar-nav navbar-right">
                <li class="nav-item">
                    <a class="nav-link" href="login.php?logout=1">Logout</a>
                </li>
        </ul>
    </div>
</nav>

<div class="topspacer"></div>
<main role="main">
    <div class="container">
    
                <div class="list-group">
                
                    <a href="settings.php" class="list-group-item list-group-item-action">Settings</a>
                    <a href="new.php" class="list-group-item list-group-item-action">New Entry</a>
                    <a href="report.php" class="list-group-item list-group-item-action">View report</a>
                </div>



</div>
    </main>
    <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://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
        </body>
    </html>

注意现在页面边缘和导航栏菜单之间的间距。但是，如果我使用 Bootstrap 4.0.0 运行相同的代码，则会出现：

引导 v4.0.0：

.topspacer {
    padding-top: 70px;
}

.righticon {
    float: right;
}

.clear {
    clear: both;
}

a {
    text-decoration: none;
}

<!doctype html>
    <html>
        <head>
        <meta charset="utf-8">
           <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
            <title>Bootstrap 4 | Home</title>
        
        </head>
        <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-warning">
        <a class="navbar-brand" href="#">Bootstrap 4</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto">
            <li class="nav-item active"><a class="nav-link" href="https://mood-tracker.ch/main.php">Home<span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="settings.php">Settings</a></li><li class="nav-item"><a class="nav-link" href="nrew.php">New Entry</a></li><li class="nav-item"><a class="nav-link" href="report.php">Report</a></li></ul>
                    <ul class="nav navbar-nav navbar-right">
                    <li class="nav-item">
                        <a class="nav-link" href="login.php?logout=1">Logout</a>
                    </li>
            </ul>
        </div>
    </nav>

    <div class="topspacer"></div>
    <main role="main">
        <div class="container">
        
                    <div class="list-group">
                    
                        <a href="settings.php" class="list-group-item list-group-item-action">Settings</a>
                        <a href="new.php" class="list-group-item list-group-item-action">New Entry</a>
                        <a href="report.php" class="list-group-item list-group-item-action">View report</a>
                    </div>



    </div>
        </main>
        <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://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
            </body>
        </html>

此外，列表项更大，空间更大。我看到左/右分配有一些变化（例如在导航栏中），但我找不到变化。您能否指出正确的方向以实现与我的引导程序 4 示例中相同的布局？谢谢！

【问题讨论】：

请注意，Bootstrap 使用SemVer。这意味着，重大更新 (4 -> 5) 中的更改可以（并且可能会）带来向后不兼容的更改。
有many changes

标签： html css bootstrap-4 padding bootstrap-5

【解决方案1】：

如果主要版本之间可能发生的样式更改给出了完全相同的布局/间距，则可能无法获得完全相同的布局/间距。

遇到此类问题的第一件事是检查Migrating to v5，是否有提及。

对于Navbars，您有：

导航栏
打破导航栏现在需要一个容器（以大大简化间距要求和所需的 CSS）。

所以你需要在你的<nav> 中添加<div class="container-fluid"> 作为容器。

关于Components中提到的间距：

组件警报、面包屑、卡片、下拉列表、列表组、模式、弹出框和工具提示的统一填充值基于我们的 $spacer 变量。见#30564。

并且active 应该应用于nav-link 而不是nav-item (<li class="nav-item"><a class="nav-link active")，但对于 v4 也是如此。

.topspacer {
  padding-top: 70px;
}

.righticon {
  float: right;
}

.clear {
  clear: both;
}

a {
  text-decoration: none;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  <title>Bootstrap 5 | Home</title>

</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-warning">

    <div class="container-fluid">
      <a class="navbar-brand" href="#">Bootstrap 5</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto">
          <li class="nav-item"><a class="nav-link active" href="https://mood-tracker.ch/main.php">Home<span class="sr-only">(current)</span></a></li>
          <li class="nav-item"><a class="nav-link" href="settings.php">Settings</a></li>
          <li class="nav-item"><a class="nav-link" href="nrew.php">New Entry</a></li>
          <li class="nav-item"><a class="nav-link" href="report.php">Report</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="nav-item">
            <a class="nav-link" href="login.php?logout=1">Logout</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="topspacer"></div>
  <main role="main">
    <div class="container">

      <div class="list-group">
        <a href="settings.php" class="list-group-item list-group-item-action">Settings</a>
        <a href="new.php" class="list-group-item list-group-item-action">New Entry</a>
        <a href="report.php" class="list-group-item list-group-item-action">View report</a>
      </div>

    </div>
  </main>
  <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://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>

</html>

与您的问题无关，但 clear: both 和 float: right 现在大部分时间都表明您做错了：

.righticon {
    float: right;
}

.clear {
    clear: both;
}

【讨论】：

谢谢，我不知何故错过了迁移部分。我并不真正关心列表条目中的间距，认为它可能是相关的，因为这也不同。关于 CSS，我刚刚复制了旧项目的文件，目前没有使用这些类。