Question

我正在尝试向Bootstrap 4.0的Navbar菜单添加自定义菜单切换。我使用的代码来自Codeply HERE。我正在尝试将X切换样式应用于网站的引导导航栏。这是我现在所拥有的。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Meta tag for responsive webpages -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <!-- Stylesheet for Bootstrap Minimized -->
    <link rel="stylesheet" href="CSS/main.css"> <!-- Stylesheet for Main CSS -->
    <link rel="stylesheet" href="CSS/Bootstrap-Overrides.css"> <!-- Stylesheet for Bootstrap Overrides -->
</head>  
<body>
    <nav class="navbar navbar-expand-md navbar-custom">
        <a href="/" class="navbar-brand"><img src="Blank" alt="blank" height="80" width="185"></a>
    <div class="container-fluid">  
            <div class="row">
                <div class="col-sm-4">
                    <nav class="navbar navbar-default" role="navigation">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle x collapsed" data-toggle="collapse" data-target="#navbar-collapse-x">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            </button>
                        </div>
                        <div class="collapse navbar-collapse" id="navbar-collapse-x">
                            <ul class="nav navbar-nav navbar-right">
                            <li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li>
                            <li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li>
                            </ul>
                        </div> .navbar-collapse 
                    </nav>
                </div>
            </div>
        </div>
        <div class="navbar-collapse collapse" id="navbar2">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Info<span class="sr-only">Information Section</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services<span class="sr-only">Services Section</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact<span class="sr-only">Contact Section</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">FAQ<span class="sr-only">Frequently Asked Questions</span></a>
                </li>
            </ul>
        </div>
    </nav>

我在这里做错了什么？在我添加自定义切换之前，这看起来像是狗屎表演，看起来还不错...不确定为什么为什么不起作用？

Answer 1

如果您使用的是最新的引导程序v4.0，则代码笔代码将无法正常工作，因为它使用的是引导程序v3.3。

bootstrap 4.0导航栏文档非常好。很多例子。

https://getbootstrap.com/docs/4.0/components/navbar/

当然一切皆有可能，这是bootstrap 4解决方案。

请参见sass fiddle ... https://jsfiddle.net/joshmoto/7syc3hfu/1/

/* remove navbar button stying */
.navbar-toggler {
  background: none;
  border: none;

  /* remove the blue outline when active or focused */
  &:active, &:focus {
    outline: 0;
  }

  /* basic styles for each icon bar */
  .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    margin: 4px 0 4px 0;
    transition: all 0.2s;

    /* custom .navbar-dark .icon-bar background */
    .navbar-dark & {
      background: #ffffff;

    }

    /* .navbar open top .icon-bar rotated down 45° */
    &:nth-of-type(1) {
      transform: rotate(45deg);
      transform-origin: 10% 10%;
    }

    /* .navbar open middle .icon-bar invisible */
    &:nth-of-type(2) {
      opacity: 0;
      filter: alpha(opacity=0);
    }

    /* .navbar open bottom .icon-bar rotated up 45° */
    &:nth-of-type(3) {
        transform: rotate(-45deg);
        transform-origin: 10% 90%;
    }

  }

  /* styles for when .navbar is closed */
  &.collapsed {

    .icon-bar {

      /* .navbar closed top .icon-bar no rotation - straight */
      &:nth-of-type(1) {
          transform: rotate(0);
      }

      /* .navbar open middle .icon-bar visible */
      &:nth-of-type(2) {
          opacity: 1;
          filter: alpha(opacity=100);
      }

      /* .navbar open bottom .icon-bar no rotation - straight */
      &:nth-of-type(3) {
          transform: rotate(0);
      }

    }

  }

}

sass输出此CSS。

.navbar-toggler {
  background: none;
  border: none;
}

.navbar-toggler:active,
.navbar-toggler:focus {
  outline: 0;
}

.navbar-toggler .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  margin: 4px 0 4px 0;
  transition: all 0.2s;
}

.navbar-dark .navbar-toggler .icon-bar {
  background: #ffffff;
}

.navbar-toggler .icon-bar:nth-of-type(1) {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

.navbar-toggler .icon-bar:nth-of-type(2) {
  opacity: 0;
  filter: alpha(opacity=0);
}

.navbar-toggler .icon-bar:nth-of-type(3) {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}

.navbar-toggler.collapsed .icon-bar:nth-of-type(1) {
  transform: rotate(0);
}

.navbar-toggler.collapsed .icon-bar:nth-of-type(2) {
  opacity: 1;
  filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .icon-bar:nth-of-type(3) {
  transform: rotate(0);
}

如果需要CSS版本，请参阅此小提琴。 https://jsfiddle.net/joshmoto/9r8ux6p5/

自定义Boootstrap 4.1 Toggler动画

1 个答案: