Question

无法在我的边栏中切换我的字体真棒汉堡。使用bootstrap 4 我不知道关于javascript的任何事情，我只是将其粘贴在底部

<body>
<div class="container-fluid header navbar-fixed-top">        
    <div class="row">
           <div class="hidden-md-up col-sm-1 col-xs-2">
                <i class="fa fa-bars nav-toggler"></i>
           </div>

           <div class="a col-sm-11 col-xs-10">                        
                <img src="images/logo.gif" class="img-fluid center-block" alt="emblem">                        
           </div>
    </div>   
</div>

       <div class="main-navigation">
<ul class="nav nav-stacked">
    <li class="nav-item">
        <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#area">Locations</a>     
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#deals">Deals</a>     
    </li>
    <li class="nav-item">
         <a class="nav-link" href="#about">About Us</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#contact">Contact Us</a>
    </li>
</ul>
</div>

  <div class="space">
      <p>dsnjjbvfajh</p>          
  </div>
  <div class="space2">
    <p>asfdvhjashg</p>
  </div>

<!-- jQuery first, then Bootstrap JS. -->
<script>
    $(function() {

        $('.nav-toggler').on('click', function() {
            $('.main-navigation').toggleClass('open');
        });
    });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

和css

body {
position: relative;

}

/**** HEADER ****/
.header {
    background-color: #232323 ;
    color: white;
    padding-top: 0.25em;
    box-shadow: 0 0 10px rgba(1, 1, 1, 1);
} 

.nav a {
    background-color: green;
    color: black;

}

.space{
    width: 100vw;
    height: 100vh;
    background-color: aquamarine;
}

.space2 {
    width: 100vw;
    height: 100vh;
    background-color: greenyellow;    
}

.main-navigation {
    position: fixed;
    width: 40%;
    height: auto;
    top: 6em;
    padding: 1em;
    left: 0;
    background-color: antiquewhite;
    transform: translateX(-50%);
    transition:transform 0.6s ease;


}

.main-navigation.open {
    transform: translateX(0);
}

.nav-toggler{
    cursor: pointer;
}

抱歉，我只是剪切和粘贴过载欢呼任何帮助

不能让我在导航栏中的幻灯片工作

0 个答案: