搜索
搜索

导航栏（引导程序）在顶部占据空间 - 默认情况下我可以将其放在滑块的顶部

debugcn 发表于 Dev
7
大卫·德拉奇

可能是非常基本的问题，但我遇到了问题。我正在为我正在制作的网站使用引导程序设计。默认情况下，网站没有任何图像滑块。

添加 img 滑块后，我的导航栏似乎始终在其上方，而从未在滑块上方，这是我不喜欢的。下面是例子：

这是加载页面时的样子 现在的样子

这就是我希望它在您加载页面时的外观（请注意，当我向下滚动一点时它工作正常） 在此处输入图片说明

所以基本上我的导航工作得很好，只是不在滑块的顶部。

我将包含包含所有内容的整个 .css 文件，我将图像链接到滑块并创建了位于顶部的导航栏（不透明度为 0.7）。

我只想让它在开始时位于滑块的顶部，并在滚动时继续位于所有内容的顶部（注意滚动在代码段中不起作用）。当滚动刚开始位置是我遇到的问题时，它工作正常。

也不要担心滑块中图像上的蓝色东西。这是 WIP。

.slider {
  box-shadow: 0px 4px 10px #9d9d9d;
  padding: 0;
  margin: 0;
  max-width: 100%;
  max-height: 600px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 4px;
  
    
}

.slider ul {
  width: 1000%;
  height: 600px;
  position: relative;
  list-style: none;
  left: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
  -moz-animation:slide-animation 5s infinite;
  -webkit-animation:slide-animation 25s infinite;
}


.slider li {
  width: 10%;
  list-style: none;
  float: left;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  border-radius: 4px;
}

span.desc1 {
  position: absolute;
  height: 240px;
  width: 600px;
  display: block;
  font-size: 50px;
  bottom: 250px;
  left: 800px;
  padding: 0.5px 20px 0px 20px;
  margin-top: -450px;
  overflow: hidden;
  background-color:rgba(47, 118, 171, 0.7);
  color: #fcfcfc;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  text-shadow: 0px 1px 1px #9d9d9d;
  font-weight: normal;
  border-radius: 4px;
  z-index:2;
}

span.desc2 {
  position: absolute;
  height: 80px;
  width: 300px;
  display: block;
  font-size: 0.8em;
  bottom: 0;
  padding: 0.5px 20px 0px 20px;
  margin-top: -450px;
  overflow: hidden;
  background-color:rgba(47, 118, 171, 0.6);
  color: #fcfcfc;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  text-shadow: 0px 1px 1px #9d9d9d;
  font-weight: normal;
  border-radius: 4px;
  z-index:2;
}

p.desc{
    color: #FFF;
}

@-webkit-keyframes slide-animation {
  1% {left: 0%; opacity: 1;}
  18% {left: 0%; opacity: 1}
  19% {opacity: 0.2;}
  20% {left: -100%; opacity: 1;}
  58% {left: -100%; opacity: 1;}
  59% {opacity: 0.2;}
  60% {left: -200%; opacity: 1;}
  98% {left: -200%; opacity: 1;}
  99% {opacity: 0.5;}
  100% {left: 0%;}
}

@-moz-keyframes slide-animation {
  1% {left: 0%; opacity: 1;}
  18% {left: 0%; opacity: 1}
  19% {opacity: 0.2;}
  20% {left: -100%; opacity: 1;}
  58% {left: -100%; opacity: 1;}
  59% {opacity: 0.2;}
  60% {left: -200%; opacity: 1;}
  98% {left: -200%; opacity: 1;}
  99% {opacity: 0.5;}
  100% {left: 0%;}
}



h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway", Helvetica, Arial, sans-serif;
}

p {
  line-height: 1.55;
  color: #333;
  font-size: 400;
  font-family: "Raleway", Helvetica, Arial, sans-serif;
}

h1 {
  font-size: 62px;
}

h2 {
  font-size: 30px;
  margin-bottom: 65px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 18px;
}

/* ==================================================
  General
  ================================================== */
a {
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

/* ==================================================
  Elements
  ================================================== */
.btn {
  background-color: #2f76ab;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: #fff;
  padding: 15px 45px;
  border-radius: 50px;
}

.btn:hover {
  background-color: #E04F00;
  color: #fff;
}

.btn:focus {
  color: #fff;
}

.btn-ghost {
  border: 3px solid #fff;
  background-color: transparent;
}

.btn-ghost:hover {
  background-color: #fff;
  color: #2f76ab;
}

section {
  padding: 85px 0;
}

.card {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  overflow: hidden;
}

a:hover {
  text-decoration: none !important;
}

.scrolltop {
  display: none;
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #199EB8;
  color: #fff;
  text-align: center;
  font-size: 24px;
}

.scrolltop:hover, .scrolltop:active, .scrolltop:focus {
  color: #fff !important;
  opacity: .75;
}

/* ==================================================
  Hero Styling
================================================== */
.hero {
  display: table;
  position: relative;
  background-image: url(../img/cover.jpg);
  background-size: cover;
  padding: 150px 0;
  color: #fff;
  width: 100%;
  height: 100vh;
}

.hero:after {
  content: '';
  z-index: 0;
  position: absolute;
  background: rgba(0, 0, 0, 0.65);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.hero .container {
  position: relative;
  z-index: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

.hero-brand {
  margin-bottom: 75px;
  display: inline-block;
}

.hero-brand:hover {
  opacity: .75;
}

.tagline {
  font-family: "Raleway", Helvetica, Arial, sans-serif;
  font-size: 26px;
  margin: 45px 0 75px 0;
  color: #fff;
}

/* ==================================================
  Header Styling
================================================== */
#header {
  background: rgba(47, 118, 171, 0.7);
  height: 70px;
}

#header #logo {
  margin: 14px 25px 0 0;
}

#header #logo h1 {
  font-size: 36px;
  margin: 0;
  padding: 2px 0;
  line-height: 1;
  font-family: "Raleway", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

#header #logo h1 a, #header #logo h1 a:hover {
  color: #fff;
}

#header #logo img {
  padding: 0;
  margin: 0;
  max-height: 40px;
}

@media (max-width: 768px) {
  #header {
    height: 50px;
  }
  #header #logo {
    margin: 10px 0 0 0;
  }
  #header #logo h1 {
    padding: 2px 0;
    font-size: 26px;
  }
  #header #logo img {
    max-height: 30px;
  }
}

#header .social-nav {
  margin-top: 15px;
}

#header .social-nav a {
  font-size: 24px;
  margin-left: 15px;
  color: #fff;
}

#header .social-nav a:hover {
  color: rgba(255, 255, 255, 0.75);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Nav Menu Essentials */
.nav-menu, .nav-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
  
}

.nav-menu ul {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  z-index: 999;
}

.nav-menu li {
  position: relative;
  white-space: nowrap;
}

.nav-menu > li {
  float: left;
}

.nav-menu li:hover > ul,
.nav-menu li.sfHover > ul {
  display: block;
}

.nav-menu ul ul {
  top: 0;
  left: 100%;
}

.nav-menu ul li {
  min-width: 180px;
}

/* Nav Menu Arrows */
.sf-arrows .sf-with-ul {
  padding-right: 30px;
}

.sf-arrows .sf-with-ul:after {
  content: "\f107";
  position: absolute;
  right: 15px;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
}

.sf-arrows ul .sf-with-ul:after {
  content: "\f105";
}

/* Nav Meu Container */
#nav-menu-container {
  margin: 0;
    
}

@media (max-width: 768px) {
  #nav-menu-container {
    display: none;
  }
}

/* Nav Meu Styling */
.nav-menu a {
  padding: 22px 15px 18px 15px;
  text-decoration: none;
  display: inline-block;
  color: #fff;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 15px;
  outline: none;
}

.nav-menu a:hover, .nav-menu li:hover > a, .nav-menu .menu-active > a {
  color: rgba(255, 255, 255, 0.75);
}

.nav-menu ul {
  margin: 4px 0 0 15px;
  -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.08);
}

.nav-menu ul li {
  background: #fff;
  border-top: 1px solid #f4f4f4;
}

.nav-menu ul li:first-child {
  border-top: 0;
}

.nav-menu ul li:hover {
  background: #199EB8;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.nav-menu ul li a {
  color: #333;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
  padding: 10px 15px;
}

.nav-menu ul li a:hover {
  color: #fff;
}

.nav-menu ul ul {
  margin: 0;
}

/* Mobile Nav Toggle */
#mobile-nav-toggle {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
  margin: 8px 10px 0 0;
  border: 0;
  background: none;
  font-size: 24px;
  display: none;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  outline: none;
  cursor: pointer;
}

#mobile-nav-toggle i {
  color: #fff;
}

@media (max-width: 768px) {
  #mobile-nav-toggle {
    display: inline;
  }
}

/* ==================================================
  About styling
  ================================================== */
  
  
.about h2{
    color: #2f76ab;
}

img.tbasr{
    width: 50%;
    height: 50%;
    margin: 10px;
    float: right;

}

img.tbasl{
    width: 50%;
    height: 50%;
    margin: 10px;
    float: left;

}



/* ==================================================
  Features Styling
  ================================================== */
.features {
  padding-bottom: 45px;
}

.features h2 {
  color: #2f76ab;
}

.features img {
    width: 50%;
    height: 50%;
    margin: 10px;
    float: left;

}


/* Mobile Nav Styling */
#mobile-nav {
  position: fixed;
  top: 0;
  padding-top: 18px;
  bottom: 0;
  z-index: 998;
  background: rgba(0, 0, 0, 0.9);
  left: -260px;
  width: 260px;
  overflow-y: auto;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

#mobile-nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#mobile-nav ul li {
  position: relative;
}

#mobile-nav ul li a {
  color: #fff;
  font-size: 16px;
  overflow: hidden;
  padding: 10px 22px 10px 15px;
  position: relative;
  text-decoration: none;
  width: 100%;
  display: block;
  outline: none;
}

#mobile-nav ul li a:hover {
  color: #fff;
}

#mobile-nav ul li li {
  padding-left: 30px;
}

#mobile-nav ul .menu-has-children i {
  position: absolute;
  right: 0;
  z-index: 99;
  padding: 15px;
  cursor: pointer;
  color: #fff;
}

#mobile-nav ul .menu-has-children i.fa-chevron-up {
  color: #199EB8;
}

#mobile-nav ul .menu-item-active {
  color: #199EB8;
}

#mobile-body-overly {
  width: 100%;
  height: 100%;
  z-index: 997;
  top: 0;
  left: 0;
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  display: none;
}

/* Mobile Nav body classes */
body.mobile-nav-active {
  overflow: hidden;
}

body.mobile-nav-active #mobile-nav {
  left: 0;
}

body.mobile-nav-active #mobile-nav-toggle {
  color: #fff;
}

/* ==================================================
  Stats Styling
================================================== */
.stats-row {
  margin-top: 65px;
}

.stats-col .circle {
  display: inline-block;
  width: 160px;
  height: 160px;
  font-family: "Raleway", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #666;
  border: 6px solid #2f76ab;
  border-radius: 50%;
  padding: 55px 25px 0 25px;
  position: relative;
}

.stats-col .circle .stats-no {
  color: #fff;
  width: 75px;
  height: 75px;
  line-height: 70px;
  top: -25px;
  right: -15px;
  font-family: "Raleway", Helvetica, Arial, sans-serif;
  font-size: 18px;
  background-color: #E04F00;
  position: absolute;
  border-radius: 50%;
  font-weight: 700;
}





/* ==================================================
  Call-to-action Styling
  ================================================== */
.cta {
  background-color: #2f76ab;
  padding: 25px 0;
}

.cta h2 {
  margin-bottom: 5px;
}

.cta h2,
.cta p {
  color: #fff;
}

.cta p {
  margin-bottom: 0;
  opacity: .75;
}

.cta .btn-ghost {
  position: relative;
  top: 13px;
}

/* ==================================================
  Portfolio Styling
  ================================================== */
.portfolio {
  background-color: #edf6ff;
  padding-bottom: 0;
}

.portfolio h2 {
  color: #2f76ab;
  margin-bottom: 25px;
}

.portfolio-grid {
  margin-top: 65px;
}

.portfolio-grid .row {
  margin: 0;
}

.portfolio-grid .row > div {
  padding: 0;
}

.portfolio-grid .row > div .card img {
  width: 100%;
}

.portfolio-grid .row > div .card .portfolio-over {
  position: absolute;
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.portfolio-grid .row > div .card .portfolio-over > div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.portfolio-grid .row > div .card .portfolio-over .card-title {
  color: #fff;
  font-size: 30px;
}

.portfolio-grid .row > div .card .portfolio-over .card-text {
  color: #fff;
  opacity: .75;
  padding: 0 45px;
}

.portfolio-grid .row > div .card:hover .portfolio-over {
  opacity: 1;
  visibility: visible;
}

.portfolio img{
    width: 50%;
    height: 50%;
    margin: 10px;
    float: left;

}

/* ==================================================
  Team Styling
  ================================================== */
.team h2 {
  color: #199EB8;
}

.team .col-sm-3 {
  padding: 0;
}

.team .card > a {
  display: block;
}

.team .card img {
  width: 100%;
}

.team .card h4 {
  color: #fff;
  text-transform: uppercase;
}

.team .card p {
  font-size: 11px;
  color: #fff;
  opacity: .75;
  margin: 0;
  padding: 0 35px;
}

.team .card .social-nav {
  margin-bottom: 45px;
}

.team .card .social-nav a {
  color: #fff;
  font-size: 16px;
  margin: 0 4px;
}

.team .card .social-nav a:hover {
  opacity: .75;
}

.team .card:hover .team-over {
  opacity: 1;
  visibility: visible;
}

.team .card:hover .card-title-wrap {
  background-color: #199EB8;
}

.team .card:hover .card-title-wrap .card-title, .team .card:hover .card-title-wrap .card-text {
  color: #fff;
}

.team .team-over {
  padding-top: 45px;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.team .card-title-wrap {
  padding: 15px 25px;
  position: relative;
  z-index: 9;
  background-color: #fff;
}

.team .card-title-wrap .card-title, .team .card-title-wrap .card-text {
  font-family: "Raleway", Helvetica, Arial, sans-serif;
  display: block;
  margin: 0;
}

.team .card-title-wrap .card-title {
  font-size: 24px;
  color: #333;
}

.team .card-title-wrap .card-text {
  font-size: 18px;
  color: #999;
}

/* ==================================================
  Contact Section
  ================================================== */
#contact {
  background: #f7f7f7;
  padding: 80px 0;
}

#contact h2 {
  font-family: "Raleway", Helvetica, Arial, sans-serif;
  color: #199EB8;
}

#contact .info i {
  font-size: 32px;
  color: #199EB8;
  float: left;
}

#contact .info p {
  padding: 0 0 10px 50px;
  line-height: 24px;
}

#contact .form #sendmessage {
  color: #199EB8;
  border: 1px solid #199EB8;
  display: none;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}

#contact .form #errormessage {
  color: red;
  display: none;
  border: 1px solid red;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}

#contact .form #sendmessage.show, #contact .form #errormessage.show, #contact .form .show {
  display: block;
}

#contact .form .validation {
  color: red;
  display: none;
  margin: 0 0 20px;
  font-weight: 400;
  font-size: 13px;
}

#contact .form input, #contact .form textarea {
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#contact .form button[type="submit"] {
  background: #199EB8;
  border: 0;
  padding: 10px 24px;
  color: #fff;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

#contact .form button[type="submit"]:hover {
  background: #23c2e1;
}

/* ==================================================
  Footer Styling
  ================================================== */
.site-footer {
  background-color: #111;
  padding: 0;
}

.site-footer h2, .site-footer p {
  color: #fff;
}

.site-footer p {
  opacity: .75;
  line-height: 2.0925;
}

.site-footer h2,
.site-footer .btn {
  margin-bottom: 25px;
}

.site-footer .social-nav a {
  color: #fff;
  opacity: .25;
}

.site-footer .social-nav a:hover {
  opacity: 1;
}

.site-footer .bottom {
  background-color: #000;
  padding: 20px 0;
}

.site-footer .bottom .list-inline, .site-footer .bottom p {
  margin: 0;
}

.site-footer .bottom .list-inline {
  position: relative;
  top: 5px;
}

.site-footer .bottom .list-inline a {
  color: #fff;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  margin-right: 15px;
}

.site-footer .bottom .list-inline a:hover {
  color: #199EB8;
}

.site-footer .credits {
  color: #ddd;
}

.site-footer .credits a {
  color: #199EB8;
}

/* ==================================================
  Responsive Styling
  ================================================== */
@media (max-width: 61.9em) {
  section,
  .block,
  .cta {
    padding: 35px 0;
  }
  .features {
    padding-bottom: 5px;
  }
  p,
  .block p {
    margin: 0;
  }
  .hero-brand {
    margin-bottom: 35px;
  }
  .tagline {
    margin: 35px 0;
  }
  h1 {
    font-size: 32px;
    margin: 0;
  }
  h2,
  .tagline {
    font-size: 24px;
  }
  h2 {
    margin-bottom: 25px;
  }
  h3 {
    font-size: 14px;
  }
  .hero {
    padding: 75px 0;
  }
  .stats-col {
    margin-bottom: 25px;
  }
  .block {
    height: auto;
  }
  .feature-col {
    padding-bottom: 30px;
  }
  .portfolio-grid .card h3.card-title {
    font-size: 18px !important;
  }
  .portfolio-grid .card .card-text {
    font-size: 13px;
  }
  .team .team-over {
    padding-top: 20px;
  }
  .team .card .social-nav {
    margin-bottom: 15px;
    padding: 0;
  }
  .site-footer .social-nav {
    margin-bottom: 35px;
  }
  .site-footer .list-inline {
    text-align: center;
    padding-bottom: 15px;
  }
  .site-footer .list-inline li {
    display: inline-block;
  }
}



@media (max-width: 767px) {
  .block {
    padding-left: 30px;
    padding-right: 30px;
  }
}
<!-- Header -->
  <header id="header">
    <div class="container">
    
      <div id="logo" class="pull-left">
        <a href="index.html"><img src="img/logo-nav.png" alt="" title="" /></img></a>
      </div>
        
      <nav id="nav-menu-container">
        <ul class="nav-menu">
          <li><a href="#about"><?php echo $lang['nav_tbas']; ?></a></li>
          <li><a href="#features"><?php echo $lang['nav_hansaworld']; ?></a></li>
          <li><a href="#team"><?php echo $lang['nav_solutions']; ?></a></li>
          <li><a href="#portfolio"><?php echo $lang['nav_about']; ?></a></li>
          <!--<li class="menu-has-children"><a href="">Drop Down</a>
            <ul>
              <li><a href="#">Drop Down 1</a></li>
              <li class="menu-has-children"><a href="#">Drop Down 2</a>
                <ul>
                  <li><a href="#">Deep Drop Down 1</a></li>
                  <li><a href="#">Deep Drop Down 2</a></li>
                  <li><a href="#">Deep Drop Down 3</a></li>
                  <li><a href="#">Deep Drop Down 4</a></li>
                  <li><a href="#">Deep Drop Down 5</a></li>
                </ul>
              </li>
              <li><a href="#">Drop Down 3</a></li>
              <li><a href="#">Drop Down 4</a></li>
              <li><a href="#">Drop Down 5</a></li>
            </ul>
          </li>-->
          <li><a href="#contact"><?php echo $lang['nav_contact']; ?></a></li>
          <li><a href="http://ticket.sofido.net/login.php"><?php echo $lang['nav_support']; ?></a></li>
        </ul>
      </nav>
      <!-- #nav-menu-container -->
      
      <nav class="nav social-nav pull-right hidden-sm-down">
        <a href="https://www.facebook.com/SOFIDOgroup/"><i class="fa fa-facebook"></i></a> 
        <a href="#contact"><i class="fa fa-envelope"></i></a>
      </nav>
    </div>
  </header>
  <!-- /header -->
    
    <!-- Slider -->

            <div class="slider">
                <ul>
                    <li>
                        <img src="http://www.sofido.net/img/slider/sofido-slide-01.jpg" />
                        <span class="desc1">
                            <p class="desc1"><div id="slide01">You are awesome<div></p>
                        </span>
                    </li>
                    <li>
                        <img src="http://www.sofido.net/img/slider/sofido-slide-01.jpg" />
                        <span class="desc2">
                            <h4><br />Another caption title</h4>
                            <p class="desc">More lorem ipsum dolor...</p>
                        </span>
                    </li>
                    <li>
                        <img src="http://www.sofido.net/img/slider/sofido-slide-01.jpg" />
                        <span class="desc">
                            <h4><br />Another caption title</h4>
                            <p class="desc">More lorem ipsum dolor...</p>
                        </span>
                    </li>
                </ul>
            </div>
    
    
   <!-- /Slider -->

疯人院

使用position: absoluteon#header会将其从静态布局流中取出，滑块应该“向上滑动”，可以这么说。您还需要指定宽度，因为它不在流程中：width: 100%或者width: 100vw应该可以工作。为了更好地衡量，您还应该添加top: 0和left: 0。

您可能还需要设置一个z-index。

请注意，我对 Bootstrap 不是很熟悉，可能有更多的“Bootstrap 方式”来实现这一点，但它应该可以工作。

另请注意，我不知道这是否会干扰您使用的插件，从而使标题固定。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

引导程序导航栏顶部边框不同的颜色

来自分类Dev

引导程序。滚动链接菜单并修复页面顶部的导航栏

来自分类Dev

引导程序导航栏顶部边框不同的颜色

来自分类Dev

动态引导程序3导航栏固定的顶部重叠内容

来自分类Dev

固定在顶部导航栏覆盖网站上的引导程序

来自分类Dev

在导航栏引导程序顶部添加文本的正确方法

来自分类Dev

删除引导导航栏上的顶部填充

来自分类Dev

边栏导航更改为引导中的顶部导航栏

来自分类Dev

替换引导程序代码后，导航栏未固定在顶部

来自分类Dev

如何在引导程序 4 中居中固定顶部导航栏

来自分类Dev

在移动视口中，如何阻止引导程序 4 导航栏粘在页面顶部？

来自分类Dev

引导顶部导航栏隐藏菜单项

来自分类Dev

如何在引导导航栏顶部添加图标

来自分类Dev

引导顶部导航栏隐藏菜单项

来自分类Dev

向下滚动导航栏固定顶部容器流体时引导导航栏容器

来自分类Dev

滚动顶部导航栏

来自分类Dev

在导航栏顶部查看

来自分类Dev

如何在默认情况下或刷新后（不是单击）在引导程序导航栏中设置活动项目

来自分类Dev

主视图占据了scrollview的顶部空间？

来自分类Dev

如何“链接”页面，以便导航栏位于引导程序的顶部

来自分类Dev

需要居中徽标和顶部固定导航引导程序

来自分类Dev

在两级引导导航栏中，我无法使顶部保持固定

来自分类Dev

Zurb Foundation 5中的顶部栏在没有JavaScript的情况下可以工作吗？

来自分类Dev

如何使Foundation 5顶部栏（导航栏）项使用所有可用空间

来自分类Dev

将导航栏品牌放在引导程序 4 的右侧

来自分类Dev

带有引导程序默认导航栏的图像损坏

来自分类Dev

如何隐藏顶部菜单下的导航栏？

来自分类Dev

您可以在具有顶部查询的子查询中的情况下选择顶部吗？

来自分类Dev

在iOS 7的视图控制器全屏显示的情况下，是否可以将约束设置到视图的最顶部，而不仅仅是导航栏？

Related 相关文章

  1. 1

    引导程序导航栏顶部边框不同的颜色

  2. 2

    引导程序。滚动链接菜单并修复页面顶部的导航栏

  3. 3

    引导程序导航栏顶部边框不同的颜色

  4. 4

    动态引导程序3导航栏固定的顶部重叠内容

  5. 5

    固定在顶部导航栏覆盖网站上的引导程序

  6. 6

    在导航栏引导程序顶部添加文本的正确方法

  7. 7

    删除引导导航栏上的顶部填充

  8. 8

    边栏导航更改为引导中的顶部导航栏

  9. 9

    替换引导程序代码后，导航栏未固定在顶部

  10. 10

    如何在引导程序 4 中居中固定顶部导航栏

  11. 11

    在移动视口中，如何阻止引导程序 4 导航栏粘在页面顶部？

  12. 12

    引导顶部导航栏隐藏菜单项

  13. 13

    如何在引导导航栏顶部添加图标

  14. 14

    引导顶部导航栏隐藏菜单项

  15. 15

    向下滚动导航栏固定顶部容器流体时引导导航栏容器

  16. 16

    滚动顶部导航栏

  17. 17

    在导航栏顶部查看

  18. 18

    如何在默认情况下或刷新后（不是单击）在引导程序导航栏中设置活动项目

  19. 19

    主视图占据了scrollview的顶部空间？

  20. 20

    如何“链接”页面，以便导航栏位于引导程序的顶部

  21. 21

    需要居中徽标和顶部固定导航引导程序

  22. 22

    在两级引导导航栏中，我无法使顶部保持固定

  23. 23

    Zurb Foundation 5中的顶部栏在没有JavaScript的情况下可以工作吗？

  24. 24

    如何使Foundation 5顶部栏（导航栏）项使用所有可用空间

  25. 25

    将导航栏品牌放在引导程序 4 的右侧

  26. 26

    带有引导程序默认导航栏的图像损坏

  27. 27

    如何隐藏顶部菜单下的导航栏？

  28. 28

    您可以在具有顶部查询的子查询中的情况下选择顶部吗？

  29. 29

    在iOS 7的视图控制器全屏显示的情况下，是否可以将约束设置到视图的最顶部，而不仅仅是导航栏？

热门标签

归档