Bootstrap 4 导航栏折叠时无法更改 div 的填充（移动）答案

【问题标题】：Can't alter padding of a div when Bootstrap 4 navbar is collapsed (mobile)Bootstrap 4 导航栏折叠时无法更改 div 的填充（移动）
【发布时间】：2020-12-16 12:20:47
【问题描述】：

我有一个固定在页面顶部的导航栏。在它下面，我有页面内容。第一个内容是 bootstrap4 图像轮播。我注意到对于移动设备，我需要在页面容器上放置顶部填充（在导航栏下方，其中包含我的轮播），否则轮播在展开时会被导航栏遮挡。问题是，当导航栏折叠时，相同的填充存在，留下一堆空白。

基本上，我只希望页面容器（从轮播开始）始终位于导航栏的正下方，无论它是否折叠。

下面的片段（如果你在整页上运行它会有意义）：

body {
    width:auto;
    letter-spacing: 1px;
    font-family:'Gudea', sans-serif;
    font-size:16px;
   background-color:#f7f7f7 !important;

}

.page-container {
    width: inherit;
    max-width: 100%;
    margin: auto;
    -webkit-box-shadow:0 0 15px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.3);
    box-shadow:0 0 15px rgba(0,0,0,0.3);

}


.navbar {
    background-color:#f7f7f7 !important;
    border-bottom:1px solid #E9E9E9;
    padding-bottom:30px;

}

.navbar.toggler.collapsed .page-container{
    background-color: blue
    
}

.container-fluid {
    background:#373737

}

.container{
    padding-right:15px;
    padding-left:15px;
    padding-top:25px;
    padding-bottom:25px;
    margin-right:auto;
    margin-left:auto;

}

.nav-item{
    text-align: right;
    padding:0px 10px 0px 10px

}

.nav-link{
    text-align:left;
    font-size:14px;
    color:#0c2d1c !important;
    font-weight:700;
}


.img {
    position: relative;
    width:  100px;
    height: 100px;
    background-position: 50% 50%;
}

.overview {
    padding-top: 50px;
    margin-right: 0%!important;
    margin-left: 0%!important;
}

@media (max-width: 769px) {

    .page-container{
        padding-top:50vh
    }

    .nav-link:hover span{ 
    color:#f7f7f7 !important;
    background-color:#0c2d1c;
    border-radius:8px;
    padding:6px 6px 6px 6px;
    }

    .nav-link span{ 
    padding-left:6px 
    }

}

@media (min-width: 769px) {

#about { 
    color:#f7f7f7 !important;
    background-color:#0c2d1c;
    border-radius:8px;
    padding:6px 6px 6px 6px;

}

.nav-link:hover { 
    color:#f7f7f7 !important;
    background-color:#0c2d1c;
    border-radius:8px;
    padding:6px 6px 6px 6px;

}

}

<!doctype html>

<html lang="en">
<head>
    <!--Essential items -->
    <meta charset="utf-8">
    <!-- Mobile specifications-->
    <meta content="width=device-width, intial-scale=1, maximum-scale=1" name=viewport>
    <!-- CSS-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link href = "css/style.css" rel="stylesheet" type="text/css">
    <!-- Fonts-->
    <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
    
  <title>Website</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


</head>
    
<body>

  <!--Navigation-->

    <nav id="navbar" class="navbar fixed-top navbar-expand-md navbar-light bg-light">
      <a class="navbar-brand" href="#"></a>
      <button id="toggle" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
      <div class="collapse navbar-collapse text-right" id="navbarNav">
          <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                  <a class="nav-link" id="about" href="home.html"><span><strong>ABOUT</strong></span></a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#"><span>NEWS</span></a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#"><span>LAB MEMBERS</span></a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#"><span>RESEARCH</span></a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="publications.html"><span>PUBLICATIONS</span></a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#"><span>OPPORTUNITIES</span></a>
              </li>
          </ul>    
      </div>
    </nav>

    <div class="page-container">

    <!--Carousel-->

    <div id="carouselContainer" class='container-fluid'>
      <div id="carouselRow" class="row">
        <div class="col-md-12" style="padding-left:0px; padding-right:0px">
          <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img class="d-block w-100" src="https://public.boxcloud.com/api/2.0/internal_files/712659573948/versions/757342863948/representations/png_paged_2048x2048/content/1.png?access_token=1!FQaE1Ygcg_2tnoF9ePNlbE07xrS7OhNS_HMOHJju0Eo4WXolNXHYsrppoibjO5rb99-X8oI3CKmEnjTlYHdF4P00vD4iMgygADLSSMChGqRrIld3D-2VjFxckPC5BbmQ-9uMS4TD_dmds0_B7K6yBpYnwrTCQLjvfFdnV8yuLb-CXb9k-qATomm03OJvYdncwc1MT-zQac8MQf6BxGfKYrAmSqIIR9R7REfd_PSvSUMFJiD3dHMEPYR7OQmw-NcVrjz70LLsyLT5OVL79sXaCwqQID4Us8lxKFxTxndka4sXxTrMihw_PnwaOMVqe1jfzgn92OQWUIILgy7BHFucP_TeTU8lGxDRfE-PQXYBoVxvk-DqSr2_XAkWB5r1DDAXIq4BdNFMqxqG4ZsOmGF1roqD_uty9hpJ-ex0qLM5M04S6udEJ4lK5avWIxQETJa0aNQEupymjtA2-XX2j00itD8WPdBQPyA5-HjYeExbpGQoExmgHfNOZKWnOp0xxs88kxLYhSxyaBcb2SbN0zaXYWuSgpNPga14K2butwNrJUlIKYwNh9mwfYXOs0MZ6aaoeyHganVbccHZdV9prpH56yLyQBljjgygVoKt_hpTHfmFMeePtA2EUQ0j-jz2HlP2spNv37r--_c0kVJZ3rx1fbSCn9Va7-gsHIEEUQvFpLoYPPBu&box_client_name=box-content-preview&box_client_version=2.48.1" alt="First slide">
              </div>
              <div class="carousel-item " style="box-shadow: inset 3px 4px 5px #000 !important;">
                <img class="d-block w-100" id="applegate" src="https://public.boxcloud.com/api/2.0/internal_files/712659573948/versions/757342863948/representations/png_paged_2048x2048/content/1.png?access_token=1!FQaE1Ygcg_2tnoF9ePNlbE07xrS7OhNS_HMOHJju0Eo4WXolNXHYsrppoibjO5rb99-X8oI3CKmEnjTlYHdF4P00vD4iMgygADLSSMChGqRrIld3D-2VjFxckPC5BbmQ-9uMS4TD_dmds0_B7K6yBpYnwrTCQLjvfFdnV8yuLb-CXb9k-qATomm03OJvYdncwc1MT-zQac8MQf6BxGfKYrAmSqIIR9R7REfd_PSvSUMFJiD3dHMEPYR7OQmw-NcVrjz70LLsyLT5OVL79sXaCwqQID4Us8lxKFxTxndka4sXxTrMihw_PnwaOMVqe1jfzgn92OQWUIILgy7BHFucP_TeTU8lGxDRfE-PQXYBoVxvk-DqSr2_XAkWB5r1DDAXIq4BdNFMqxqG4ZsOmGF1roqD_uty9hpJ-ex0qLM5M04S6udEJ4lK5avWIxQETJa0aNQEupymjtA2-XX2j00itD8WPdBQPyA5-HjYeExbpGQoExmgHfNOZKWnOp0xxs88kxLYhSxyaBcb2SbN0zaXYWuSgpNPga14K2butwNrJUlIKYwNh9mwfYXOs0MZ6aaoeyHganVbccHZdV9prpH56yLyQBljjgygVoKt_hpTHfmFMeePtA2EUQ0j-jz2HlP2spNv37r--_c0kVJZ3rx1fbSCn9Va7-gsHIEEUQvFpLoYPPBu&box_client_name=box-content-preview&box_client_version=2.48.1" alt="Second slide">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100" src="https://public.boxcloud.com/api/2.0/internal_files/712659573948/versions/757342863948/representations/png_paged_2048x2048/content/1.png?access_token=1!FQaE1Ygcg_2tnoF9ePNlbE07xrS7OhNS_HMOHJju0Eo4WXolNXHYsrppoibjO5rb99-X8oI3CKmEnjTlYHdF4P00vD4iMgygADLSSMChGqRrIld3D-2VjFxckPC5BbmQ-9uMS4TD_dmds0_B7K6yBpYnwrTCQLjvfFdnV8yuLb-CXb9k-qATomm03OJvYdncwc1MT-zQac8MQf6BxGfKYrAmSqIIR9R7REfd_PSvSUMFJiD3dHMEPYR7OQmw-NcVrjz70LLsyLT5OVL79sXaCwqQID4Us8lxKFxTxndka4sXxTrMihw_PnwaOMVqe1jfzgn92OQWUIILgy7BHFucP_TeTU8lGxDRfE-PQXYBoVxvk-DqSr2_XAkWB5r1DDAXIq4BdNFMqxqG4ZsOmGF1roqD_uty9hpJ-ex0qLM5M04S6udEJ4lK5avWIxQETJa0aNQEupymjtA2-XX2j00itD8WPdBQPyA5-HjYeExbpGQoExmgHfNOZKWnOp0xxs88kxLYhSxyaBcb2SbN0zaXYWuSgpNPga14K2butwNrJUlIKYwNh9mwfYXOs0MZ6aaoeyHganVbccHZdV9prpH56yLyQBljjgygVoKt_hpTHfmFMeePtA2EUQ0j-jz2HlP2spNv37r--_c0kVJZ3rx1fbSCn9Va7-gsHIEEUQvFpLoYPPBu&box_client_name=box-content-preview&box_client_version=2.48.1" alt="Third slide">
              </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
      </div>
    </div>


    <!--Content-->
    <div class='container'>
      <div class="row">
        <div class="col-md-8 pl-md-5 pr-md-4">
          <h2>Who We Are</h2>

                    <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>


      </div>  
    </div>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
  <script src="js/main.js"></script>
  <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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  
</body>
</html>

我尝试的解决方案：

CSS：

/* On mobile, when navbar collapsed, set page container padding to 0vh */
@media (max-width: 769px) {

    .navbar-collapse .page-container{
        padding-top:0vh
    }

}

还尝试了一个javascript解决方案，尝试在导航栏折叠时添加事件监听器以做某事：

if ($('#toggle').attr('aria-expanded') == "true") {
  console.log("true")
  }

这两种解决方案都不起作用..谁能告诉我我在这里做错了什么？我想在 JS 中我可以有一个事件侦听器，它知道导航栏何时折叠，当发生这种情况时，重新调整页面容器的大小，以便没有填充。但是，也许有一个简单的 CSS 解决方案？提前致谢！

【问题讨论】：

如果您添加一个实时示例，调试起来会容易得多
@VelimirTchatchevsky - 添加代码 sn-p！
嘿@DiamondJoe12，当导航栏展开和折叠滑块相应地向下或向上移动时，您是否想要，对吗？
@ChintanKotadiya - 正确，我希望图像轮播（这是页面容器 div 中的第一项，在展开或折叠时始终位于导航栏的正下方。事实上，有是一堆空白。这是因为我需要在导航栏展开时将页面容器的填充向下增加..但是当导航栏折叠时会有相同的填充。
@ChintanKotadiya - 它已修复。查看我的代码：class="navbar fixed-top navbar-expand-md navbar-light bg-light"

标签： javascript html css bootstrap-4 carousel

【解决方案1】：

刚刚看到 Bootstrap 4 除了固定顶部还有另一个选项 - 它被称为“stick-top”。

这解决了问题：

<nav id="navbar" class="navbar sticky-top navbar-expand-md navbar-light bg-light">

【讨论】：