间距 Bootstrap v5.1.1 与 4.0.0

Question

我有两个页面，一个运行 Bootstrap v5.1.1 和一个在 4.0.0 上，我注意到间距有些变化。

Bootstrap 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 相同的代码有：

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

此外，列表项目更大 space。我看到关于 left/right 分配有一些变化（例如在 Navbar 中），但我找不到变化。您能否指出正确的方向以实现与 bootstrap 4 示例中相同的布局？谢谢！

Answer 1

获得完全相同的 layout/spacing 可能是不可能的，如果这些是由主要版本之间可能发生的样式更改给出的。

遇到此类问题，首先要检查Migrating to v5，是否有提及。

对于 Navbars 你有：

Navbars
Breaking Navbars now require a container within (to drastically simplify spacing requirements and CSS required).

因此您需要在 <nav> 中添加 <div class="container-fluid"> 作为容器。

关于间距这个在Components中有提到：

Components Unified padding values for alerts, breadcrumbs, cards, dropdowns, list groups, modals, popovers, and tooltips to be based on our $spacer variable. See #30564.

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

.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;
}

间距 Bootstrap v5.1.1 与 4.0.0

Spacing Bootstrap v5.1.1 vs 4.0.0

html

css

padding

bootstrap-4

bootstrap-5

Bootstrap v5.1.1:

Bootstrap v4.0.0: