【bootstrap折叠导航栏脱离文档流 _bottstrap 】

bootstrap折叠导航栏脱离文档流

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

bottstrap

详细描述

截图

代码

<header>     
    <nav class="navbar navbar-default navbar-user" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle btn-user" data-toggle="collapse"
            data-target="#example-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="home.html">
            <img src="img/navlogo.png" alt="logo">
          </a>        
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="home.html">首页</a>
            </li>
            <li>
              <a href="job.html">职业</a>
            </li>
            <li>
              <a href="offer.html">推荐</a>
            </li>
            <li>
              <a href="about.html">关于</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <section>
      <section id="myCarousel" class="carousel slide">
          <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
              <li data-target="#myCarousel" data-slide-to="2"></li>
              <li data-target="#myCarousel" data-slide-to="3"></li>
              <li data-target="#myCarousel" data-slide-to="4"></li>
          </ol>   
          <div class="carousel-inner">
              <div class="item active">
                  <img src="img/slide1.png" alt="First slide">
              </div>
              <div class="item">
                  <img src="img/slide2.png" alt="Second slide">
              </div>
              <div class="item">
                  <img src="img/slide3.png" alt="Third slide">
              </div>
              <div class="item">
                  <img src="img/slide4.png" alt="Fourth slide">
              </div>
              <div class="item">
                  <img src="img/slide5.jpg" alt="Fifth slide">
              </div>
          </div>
          <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
      </section>
  </section>
  <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
  <script src="js/jquery-3.3.1.min.js"></script>
  <!-- 包括所有已编译的插件 -->
  <script src="js/bootstrap.min.js"></script>

.navbar-user {
    height: 100px;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    background-color: rgb(41, 176, 120);
  }
  .navbar-user  a {
    height: 100px;
    padding-top: 25px;
  } 
   .navbar-user .btn-user {
    margin: 30px 20px;
    border: none;
    background-color: rgb(72, 209, 151);
  }
  .navbar-user .btn-user:focus,
  .navbar-user .btn-user:hover {
    background-color: rgb(72, 209, 151);
  }
  .navbar-user .btn-user .icon-bar {
    background-color: rgb(255, 255, 255);
  }
 
  .navbar-user .navbar-collapse ul {
    float: right;
    
  }
  .navbar-user .navbar-collapse ul a {
    padding-top: 50px;
    text-align: center;
    color: rgb(255, 255, 255);
    background-color: rgb(41, 176, 120);
  }
  @media (max-width: 767px) {
    .navbar-user .navbar-collapse ul {
      float: none;
      margin-top: 0;
      margin-bottom: 0;
      background-color: rgb(41, 176, 120);
    }
  }
  .navbar-user .navbar-collapse ul .active a {
    border-bottom: 5px solid rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    background-color: rgb(72, 209, 151);
  }

编辑于2024-04-23

时间排序

热门排序

[散修弟子]JS-1730
0

不知道你解决，没有，我的理解是反正要么是导航代码出了问题，要么是轮播代码出了问题，
把轮播代码替换成别的代码，比如<div>3567gfy89</div>,在看下会不会出现问题，如果轮播出现问题，从其他bootstrap教程复制轮播代码再试试

查看全部>

编辑于2018-05-22

去第页