时间戳

首页 > 解决方案 > Bootstrap 4 导航栏折叠时无法更改 div 的填充（移动）

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

问题描述

我有一个固定在页面顶部的导航栏。在它下面，我有页面内容。第一个内容是 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 解决方案？提前致谢！

标签： javascripthtmlcssbootstrap-4carousel

解决方案

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

这解决了这个问题：

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

推荐阅读